diff --git a/addons/website/static/src/img/snippets_options/shadow_in.svg b/addons/website/static/src/img/snippets_options/shadow_in.svg
new file mode 100644
index 00000000000..fe9e273d23d
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/shadow_in.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="23" height="12" viewBox="0 0 23 12">
+  <g fill="none" fill-rule="evenodd" class="symbols">
+    <g class="3_buttons_shadow" transform="translate(-142 -5)">
+      <g class="shadow_in_s" transform="translate(142 5)">
+        <rect width="23" height="12" class="rectangle"/>
+        <path d="M6.5 9.5V3H17l2-3h1v12H3v-1l3.5-1.5z" class="o_graphic"/>
+        <polygon points="3.5 .5 17.5 .5 16.5 2 5.5 2 5.5 9 3.5 10" class="o_subdle"/>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/static/src/img/snippets_options/shadow_out.svg b/addons/website/static/src/img/snippets_options/shadow_out.svg
new file mode 100644
index 00000000000..ee49026cf94
--- /dev/null
+++ b/addons/website/static/src/img/snippets_options/shadow_out.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="23" height="12" viewBox="0 0 23 12">
+  <g fill="none" fill-rule="evenodd" class="symbols">
+    <g class="3_buttons_shadow" transform="translate(-185 -5)">
+      <g class="shadow_out_s" transform="translate(185 5)">
+        <rect width="23" height="12" class="rectangle"/>
+        <polygon points="21 3.2 21 12 8.308 12 6 10.9 18.692 10.9 18.692 1" class="o_subdle"/>
+        <rect width="15" height="10" x="2" class="o_graphic"/>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index 74438179ebc..c78cf234627 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -158,11 +158,17 @@
 </template>
 
 <template id="snippet_options_shadow_widgets">
-    <we-select string="Shadow" data-no-preview="true" data-shadow-class="shadow">
+    <we-button-group string="Shadow" data-shadow-class="shadow">
         <we-button data-set-shadow="">None</we-button>
-        <we-button data-set-shadow="outset" data-name="shadow_active_opt">Outset</we-button>
-        <we-button data-set-shadow="inset" data-name="shadow_inset_opt">Inset</we-button>
-    </we-select>
+        <we-button data-set-shadow="outset"
+                   data-img="/website/static/src/img/snippets_options/shadow_out.svg"
+                   data-name="shadow_active_opt"
+                   title="Outset"/>
+        <we-button data-set-shadow="inset"
+                   data-img="/website/static/src/img/snippets_options/shadow_in.svg"
+                   data-name="shadow_inset_opt"
+                   title="Inset"/>
+    </we-button-group>
     <we-multi data-css-property="box-shadow" data-dependencies="shadow_active_opt, shadow_inset_opt">
         <we-colorpicker string="⌙ Color" data-select-style="" data-css-compatible=""/>
         <we-row string="⌙ Offset (X, Y)">