CSS filter on an Image

Updated on June 18, 2019

How to change Brightness, Contrast, Saturation etc of an Image in Jupiter X?

The CSS filter property adds visual effects to your image just like Photoshop filter effects.
For example you can saturate you image or change its brightness. You can also apply a Gaussian blur to the image or adjust its contrast.
Hopefully you can add these CSS filter properties to an Image widget in Elementor.


Note:Image
 widget is one of the Elementor default widgets which can be used without any add-ons.

Jupiter X Css Filters

In order to add a CSS filter to an Image element:

1. Add a new page or edit an existing one.

2. Click on Edit with Elementor button.

3. From the Elementor’s left dashboard,  drag and drop the Image widget into your layout so that a new panel will open on the left side of the Elementor with the element’s specific settings.

4. From the Style tab > CSS Filters , you can customize your preferable filter functions for your image element, such as Blur or Brightness.

5. Update the settings.

Did this answer your question?