diff --git a/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/shadow.html b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/shadow.html
new file mode 100644
index 0000000000..f9f88401c4
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/shadow.html
@@ -0,0 +1,8 @@
+
+<div ng-controller="Umbraco.canvasdesigner.shadow">
+
+    <div class="box-slider">
+        <div ui-slider min="0" max="100" step="1" ng-model="item.values.shadow"></div>
+    </div>
+
+</div>
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/shadow.js b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/shadow.js
new file mode 100644
index 0000000000..fa082db741
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/shadow.js
@@ -0,0 +1,16 @@
+
+/*********************************************************************************************************/
+/* shadow editor */
+/*********************************************************************************************************/
+
+angular.module("Umbraco.canvasdesigner")
+
+.controller("Umbraco.canvasdesigner.shadow", function ($scope) {
+
+    if (!$scope.item.values) {
+        $scope.item.values = {
+            shadow: ''
+        }
+    }
+
+})
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/shadow.less b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/shadow.less
new file mode 100644
index 0000000000..e131911fb3
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/canvasdesigner/editors/shadow.less
@@ -0,0 +1,21 @@
+
+/************************************************************************/
+/* shadow -ALIAS- -CSS- */ 
+/************************************************************************/
+
+/***start-lessParam--ALIAS-***/
+@shadow-ALIAS-:'';
+/***end-lessParam--ALIAS-***/
+
+/***start-lessStyle--ALIAS-***/
+
+.valueshadow-ALIAS- () when  (isnumber(@shadow-ALIAS-)) {
+    -webkit-box-shadow: 0 0 @shadow-ALIAS- + 0px rgba(0, 0, 0, 0.5);
+    -moz-box-shadow: 0 0 @shadow-ALIAS- + 0px rgba(0, 0, 0, 0.5);
+    box-shadow: 0 0 @shadow-ALIAS- + 0px rgba(0, 0, 0, 0.5);
+}
+
+-SCHEMA- {
+    .valueshadow-ALIAS-
+}
+/***end-lessStyle--ALIAS-***/ 
\ No newline at end of file