CSS Effects allows you to add Opacity and filters to any element.
You can find the settings for CSS Filters in the new Powerup tab.
Quick intro to CSS Effects:
You can apply Elementor’s CSS Effects to any widget or element.
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:
- Select the desired Element (Section/Column/Widget).
- Navigate to the Effects section in the Powerup tab.
- 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.
- 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.