Multi-Layer Shadow

Multi-colored shadow gives you the ability to add multiple shadow layers to create a better and more realistic light drop effect.

You can find the section for Multi-layer Shadow in the new Powerup tab.

Just like gradients, you can apply the shadow to a child element instead.

A quick intro to Multi-Layered Shadows:

Multi-Layered shadows can be applied to any Elementor widget/element. You can add multiple shadow layers.

Getting the most value out of Multi-Layered Shadows:

Here are the different ways you can use Multi-Layered shadows:

  • Apply unique and creative shadow effects for widgets
  • Try and experiment with new styles such as Neumorphism
  • Create cool hover shadow effects

Adding Multi-Layered Shadows to Elementor Element:

  1. Select the desired Element (Section/Column/Widget).
  2. Navigate to the Multi-layer Shadow section in the Powerup tab.
  3. Click on the Add Item button.
  4. Select if you want to apply the shadow on the Text or Box Model.
  5. Choose the respective shadow options (horizontal, vertical, blur and spread), and the color.
  6. Repeat steps 3 and 4 for as many shadow layers you want.

You can reorder, duplicate and delete the colors just like with any other Elementor repeater control.

Different shadows layers can be applied to Normal and Hover element states by switching tabs. To smooth out the hover effect, apply a transition.

To apply the shadow to a text element:

Select ‘Text‘ under the ‘Apply Shadow On‘ to apply the shadow on a text element.

If you apply the Layered Shadow on a Section or Column Element and select ‘Text’, the shadow will be applied to all the text elements in that section or column.

To apply the shadow to a child element:

  1. Turn on the switch for the option ‘Apply on Child Element?‘
  2. A new input field will be visible that says Child Selector
  3. In the input, write down the CSS Selector for the element you want to target.

If you don’t know how to get CSS Selector for an element, follow this guide from Google.

A good example of a child element shadow requirement would be a block-level button where applying shadow to the Element applies it to the whole block. So, if you write .elementor-button in the child selector input, the shadow will be applied to the button element instead of the container wrapper div.

Pro Tips:

  • Don’t add shadow layers in excess. Make sure your shadows look natural.
  • You can create stunning shadows layers by playing with the shadow blur and position settings. Here are some examples.

Note:

  • The shadows are applied to the whole widget container by default. To apply it to the desired widget, you’ll have to enable the ‘Apply to Child Element‘ option and define the child selector name.
  • You can change the horizontal and vertical position of the shadow.
  • You can change the blur, offset, and spread of the shadow.
  • If you apply shadow to a column or section and then select ‘Text’, the shadow will be applied to all the text elements inside that section or column.
Was this page helpful?
Yes No