CSS Effects

CSS Effects allows you to add Opacity and filters to any element.

A quick intro to CSS Effects:

You can apply Elementor’s CSS Effects to any widget or element. You can find the settings for CSS Filters in the new Powerup tab.

Getting the most out of CSS Effects:

Here are the different ways CSS Effects can help you improve your designs:

  • Add hover effects to widgets and sections
  • Play with the opacity of elements or widgets
  • Use effects to make your sections stand out

Adding CSS Effects to Elementor Element:

  1. Select the desired Element (Section/Column/Widget).
  2. Navigate to the Effects section in the Powerup tab.
  3. Apply Opacity / CSS Filters from the respective controls.

CSS Filters can be applied to Normal and Hover states by switching tabs. To smooth out the hover effect, apply a transition.

Note:

  • You can apply CSS Effects to any Elementor widget/element.
  • CSS Effects can also be applied to sections and columns.
  • The Saturation CSS Effect only applies to images.
  • The effects can be applied to both Normal and Hover states.
Was this page helpful?
Yes No