Add a Custom Drop Shadow to an Object

Adding a drop shadow effect to your objects can help them stand out from your page.

Add a Shadow class to the Page


  1. On the page you want to use the shadow click E and then H to enter the head editor.
  2. Paste in the code below to add in the drop shadow class.
    • <style type="text/css" class="design-safe"> 
         .shadow {
           filter: drop-shadow( -5px -5px 3px rgba(0, 0, 0, 0.3) ); 
      }
      </style>
  3.  Click "Save & Close"
  4. Click "Save" to save the page.

Modify the pixel amounts for the distance and blur of the shadow and modify the RGBA value for the colour and opacity of the shadow.


Add the Shadow Class to an Object


  1. Select the object.
  2. Click "Advanced" and then "CSS Selectors" in the edit menu.
  3. Add "shadow" to the Classes box.
  4. Click "Save" to save the page.


This is an advanced feature. Modifying code in the Head can cause other elements to load incorrectly.


User Icon

Thank you for your feedback!

Was this article helpful?
Thank you for your feedback!