diff --git a/addons/web_editor/static/src/scss/web_editor.variables.scss b/addons/web_editor/static/src/scss/web_editor.variables.scss
index 04a96b5fcc1..c841919c7af 100644
--- a/addons/web_editor/static/src/scss/web_editor.variables.scss
+++ b/addons/web_editor/static/src/scss/web_editor.variables.scss
@@ -46,6 +46,8 @@ $o-we-handle-inside-line-width: 3px !default;
 $o-we-dropzone-size: 30px !default; // $grid-gutter-width (todo: allow to use the variable)
 $o-we-dropzone-border-width: 2px !default;
 $o-we-dropzone-border: $o-we-dropzone-border-width dashed $o-brand-odoo !default;
+$o-we-dropzone-accent-color: $o-we-accent !default;
+$o-we-dropzone-bg-color: rgba($o-we-dropzone-accent-color, .5) !default;
 
 // Translations
 $o-we-content-to-translate-color: rgba(255, 255, 90, 0.5) !default;
diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
index 6544c8e3fdf..ebef74151d5 100644
--- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
@@ -2050,21 +2050,20 @@ we-select.o_we_border_preview_aligned_select {
 // DROPZONES
 @keyframes dropZoneInsert {
     to {
-        box-shadow: inset 0 0 $o-we-dropzone-size 0 rgba($o-we-handles-accent-color, .5);
+        box-shadow: inset 0 0 $o-we-dropzone-size 0 scale-color($o-we-dropzone-accent-color, $alpha: -50%);
     }
 }
 
 .oe_drop_zone {
-    background: rgba(lighten($o-we-handles-accent-color, 50%), .95);
+    background: $o-we-dropzone-bg-color;
     animation: dropZoneInsert 1s linear 0s infinite alternate;
 
     &.oe_insert {
         position: relative;
         width: 100%;
         border-radius: $border-radius-lg;
-        outline: $o-we-dropzone-border-width dashed $o-we-handles-accent-color;
+        outline: $o-we-dropzone-border-width dashed $o-we-dropzone-accent-color;
         outline-offset: -$o-we-dropzone-border-width;
-        backdrop-filter: blur(2px);
         z-index: $o-we-overlay-zindex;
     }
 }
diff --git a/addons/website/static/src/scss/website.edit_mode.scss b/addons/website/static/src/scss/website.edit_mode.scss
index 803648e0f57..409770e242a 100644
--- a/addons/website/static/src/scss/website.edit_mode.scss
+++ b/addons/website/static/src/scss/website.edit_mode.scss
@@ -1,11 +1,10 @@
 $-editor-messages-margin-x: 2%;
 %o-editor-messages {
-    background: rgba(lighten($o-we-handles-accent-color, 50%), .95);
+    background: $o-we-dropzone-bg-color;
     text-align: center;
-    color: $o-we-handles-accent-color;
-    outline: $o-we-dropzone-border-width dashed $o-we-handles-accent-color;
+    color: #fff;
+    outline: $o-we-dropzone-border-width dashed $o-we-dropzone-accent-color;
     outline-offset: -$o-we-dropzone-border-width;
-    backdrop-filter: blur(2px);
 
     &:before {
         content: attr(data-editor-message);