Style tab – Effects

Adding a box shadow to your element can give it depth and allows the element to stand out on the page. For a more in depth look at shadows, see What is Shadow, Text Shadow and Boxed Shadow?

Add a box shadow to an element

To add a border: 

1. Open the Elementor Editor.
2. Add an element to the canvas.
   
3. Click the Style tab.
   
4. Open the Effects field.
    
5. To add a shadow, click the plus sign next to Box shadow.
   
6. You then have the following options:
   1. Color: Set a color for the shadow. For details, see Use the color picker. 
   2. Position: There are two types of box shadow:
      1. Outset: the shadow starts at the element border and flows outward.
      2. Inset: The shadow starts at the element border and flows inward.
   3. Horizontal and Vertical: You can achieve interesting effects by changing the position of the shadow. Use the number fields to move the shadow right and left (Horizontal) or up and down (Vertical).
   4. Blur and Spread: The shadow effect is caused by starting with a solid color and then increasingly blurring the color.
      1. Blur: Expands the area covered by the blurred color.
      2. Spread: Expands the area covered by the solid color. 

Add layers to your box shadow

After creating a box shadow, you can add more depth or create unique effects by adding more layers to the shadow. 

To add a layer to a box shadow:

1. Select an element with a box shadow and open the Effects field.
   
2. Click the plus sign by Box shadow.
   The box shadow options window appears.
   
3. Set the box shadow options and click outside the box to close the window. 
   You created a second layer of box shadow.