Priority Support
Help Center > Editor V4 > Style tab > Style tab – Effects

Style tab – Effects

Last Update: November 10, 2025

This post has been translated using machine translation, which may result in minor inaccuracies or differences in wording compared to the original. We apologize for any errors or ambiguities. Please feel free to contact us if we can clarify anything for you.

Who can use this feature:
This article is for Editor v4 users. If you’re using Editor v3, check out the relevant article here: Advanced tab

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

Transform

Transform changes an element by adjusting up to four aspects:

  • Move: Shifts an element’s position on a page. This is generally used as a hover effect.
  • Scale: Resizes the element horizontally, vertically or both without effecting the original layout space. This is generally used as a hover effect.
  • Rotate: Spins an element around a specific point. Rotate is used as both as a stationary and hover effect.
  • Skew: Slants an element along the X, Y or Z axis, distorting the shape. Skew is used as both as a stationary and hover effect.

Note
You can add all four effects to an element however, you can’t add two of the same transform effects to a single element. For example, you can’t add two Rotate effects to a headline.

Add a stationary transform effect

  1. Add a heading to the canvas.
  2. Click the Style tab.
  3. Open the Effects field.
  4. Click the plus symbol next to Transform.
  5. Select the Rotate tab.
  6. Enter 10 in the Z axis.

To delete a Transform effect:

  1. Select an element on the canvas.
  2. Open the Effects section.
  3. In the Transform section, hover over the transform effect you want to delete.
  4. Click the X icon to delete the transform effect.

Add transform to a hover effect

  1. Add a heading element to the canvas.
  2. Click the Style tab.
  3. In the Classes field, click the ellipses by local and select hover.

    You are now setting how the element will look when visitors hover over it.
  4. Open the Effects field.
  5. Click the plus sign by Transform.
  6. Enter 5 in Move X and -5 in Move Y.

    Hovering over the heading will move it.

Transition

Transitions controls how much time it take for an element to move from its normal state to its hover state. For example, if you have a button turns red when visitors hover over it, the transition setting determines how long it take for the button to turn red. Elementor Pro users can set different transition times for different effects. The example below shows how you can stagger effects to create interesting animations.

Use transition times to create animations

  1. Create a button.
  2. Click the Style tab.
  3. In the Classes section, click the ellipses by the local class and select Hover.

    You are now setting how the element will look when visitors hover over it.
  4. In this example, we’ll have the colors change and add a box shadow when users hover over it. For details, see the articles on Style tab – Typography, Style tab – Background, Style tab – Border and Style tab – Effects.
  5. In the Classes section, click local to return to editing the regular local class.
  6. Open the Effects section.
  7. Click the plus sign by Transition.

    By default all properties transition simultaneously at 200 milliseconds (MS). All users can adjust the transition time, Pro users can adjust the transition times for individual properties.
    For Pro users:
  8. Click the All Properties dropdown menu.

    The Transition Property window opens.
  9. Select Font Color from the list.

    For Duration, put 0 MS.

    Note
    Transition Property show a list of all the properties you can set a transition property for. Recently set properties appear at the beginning of the list. If you have trouble locating a property, enter its name in the Search box.
  • Click the plus sign and for Background Color, set a transition time of 200 MS.
  • Click the plus sign and for Border Color, set a transition time of 400 MS.
  • Click the plus sign and for Box shadow, set a transition time of 600 MS.

    You should see the following results:

    • Delete a Transition

    To delete a Transition:

    1. Select an element on the canvas.
    2. Open the Effects section.
    3. In the Transition section, hover over the transition you want to delete.
    4. Click the X icon to delete the transition.

    Blending allows you to edit stacked elements so that they mix with one another. 

    Blend elements

    Blending takes place when elements are stacked on top of each other. In the example below, we’ll blend two elements.

    There are several options for blending:

    • Exclusion: creates a soft, inverted effect by combining colors in a way that light areas become lighter and dark areas become darker, but with lower contrast than Difference blending.
    • Difference: compares the background and foreground colors and subtracts the darker color from the lighter one, creating a high-contrast, inverted effect.
    • Multiply: multiplies the background and foreground color values, resulting in a darker composite color where areas overlap.
    • Screen: lightens the image by inverting, multiplying, and inverting the colors again, producing a brighter result similar to projecting multiple images on a screen.
    • Overlay: combines Multiply and Screen modes, darkening dark areas and lightening light areas to increase contrast while preserving highlights and shadows.
    • Darken: compares the background and foreground colors and keeps the darker color for each pixel, producing an overall darker image.
    • Lighten: compares the background and foreground colors and keeps the lighter color for each pixel, producing an overall brighter image.
    • Color Dodge: brightens the background by decreasing contrast between the foreground and background colors, resulting in more intense highlights.
    • Color Bars:
    • Exclusion: produces a low-contrast, inverted effect by blending colors in a way that light areas lighten and dark areas darken softly.
    • Hue: applies the hue (color tone) of the foreground element to the background while preserving the background’s original saturation and luminosity.
    • Luminosity: applies the brightness (lightness) of the foreground element to the background while preserving the background’s original hue and saturation.
    • Soft light: subtly darkens or lightens the background depending on the foreground color, creating a gentle, diffused lighting effect.
    • Hard light: combines multiply and screen effects based on the foreground color, producing a strong contrast that either darkens or lightens the background sharply.
    • Saturation: applies the saturation (intensity of color) of the foreground element to the background while preserving the background’s hue and luminosity.
    • Color: applies both the hue and saturation of the foreground element to the background while preserving the background’s luminosity.

    To blend elements:

    1. Create a full page flexbox. For details, see Flexbox element.
    2. Add a background to the flexbox. For details, see Style tab – Background.    
    3. Add a heading to the flexbox and center it. For details, see Heading element and Style tab – Spacing. 
    4. In the panel of the Heading element, click the Style tab. 
    5. Open the Effects section.
    6. Select a Blend effect from the dropdown menu.

      The two elements are blended together.
    On this page

    Share this article

    Hosted with