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.

Add opacity to your element

Opacity refers to the transparency level of an element, determining how much of the background is visible through it. Lowering the opacity makes the element more transparent.

To set opacity: 

1. Add an element to the canvas.
2. Click the Style tab.
   
3. Open the Effects field.
   
4. Increase the Opacity.
   
   In this example, we’ll set the opacity to 40%.

Filters

Filters are graphics effects you can apply to your V4 elements. There are eight different filters you can apply:

• Blur: Applies a soft focus effect by blurring elements based on pixel radius.
• Brightness: Adjusts the brightness of an element by modifying its light intensity.
• Contrast: Enhances or reduces image and element color contrast for better visual distinction.
• Hue Rotate: Adjusts colors by rotating their hue around the spectrum.
• Saturate: Adjusts image or element colors by increasing or decreasing their color intensity.
• Grayscale: Converts an element’s colors to shades of gray. It desaturates the image based on a percentage value
• Invert: inverts the colors of an element—turning light colors dark, and dark colors light.
• Sepia: Applies a brownish tone to an element, which mimics the look of old photographs.
• Drop shadow: Applies a shadow effect to the content, and only the content of the element.

To apply a filter:

1. Select an element on the canvas.
2. Click the Style tab.
   
3. Open the Effects section.
   
4. Use the dropdown menu to add a filter.
   In this case, we’ll add a Drop shadow. 
   
5. Fill in the options for the filter.
   
   
   Note

   Each filter has its own set of options.

To delete a filter:

1. Select an element on the canvas.
2. Click the Style tab.
   Click the Style tab.
   
3. Open the Effects section.
   
4. In the Filters section, hover over the filter you want to delete.
   
5. Click the X icon to delete the filter.
   
   
   Note

   You can apply multiple filters to an element to create unique effects.

Backdrop filters

Filters are graphics effects you can apply to your V4 elements. There are eight different filters you can apply:

• Blur: Applies a soft focus effect by blurring elements based on pixel radius.
• Brightness: Adjusts the brightness of an element by modifying its light intensity.
• Contrast: Enhances or reduces image and element color contrast for better visual distinction.
• Hue Rotate: Adjusts colors by rotating their hue around the spectrum.
• Saturate: Adjusts image or element colors by increasing or decreasing their color intensity.
• Grayscale: Converts an element’s colors to shades of gray. It desaturates the image based on a percentage value
• Invert: inverts the colors of an element—turning light colors dark, and dark colors light.
• Sepia: Applies a brownish tone to an element, which mimics the look of old photographs.
• Drop shadow: Applies a shadow effect to the content, and only the content of the element.

To apply a filter:

1. Select an element on the canvas.
2. Click the Style tab.
   
3. Open the Effects field.
   
4. Click the plus sign by Backdrop Filters.
   
5. Select an effect from the dropdown menu.
   
   In this example, we’ll select a Sepia effect.
6. Add a value for the effect.
   In this example, we’ll make it 100%.
   
   The sepia effect applies to the element background.
   
   Note

   You can apply multiple filters to an element to create unique effects.

To delete a Backdrop filter:

1. Select an element on the canvas.
2. Click the Style tab.
   
3. Open the Effects section.
   
4. In the Backdrop Filters section, hover over the filter you want to delete.
5. Click the X icon to delete the filter.
   

Example of an interesting effect using Backdrop filters

Filters can be used to create interesting effects for your webpage. In the example below, we create a Heading element that blurs images as they pass under the heading. Add a page.

1. Add a Heading element to the top of the page. 
2. Center the text of the Heading element. For details see Style tab – Layout for details.
   
3. Add a 60 PX top margin to the Heading element. For details, see Style tab – Spacing. 
   

4. Set the width of the Heading element to 1400 PX and the height to 125 PX. See Style tab – Size for details.
   
5. Set the position to Fixed with a Z-index of 5. See Style tab – Position and Use Z-Index for details.
   
6. In the Effects section, add a Backdrop Filter of Blur: 10px.
   
7. Add an image or images below the headline.
   As visitors scroll down the page, the images will pass “under” the headline and become blurry.