How to Add a CSS Filter to a Video in Elementor?

Updated onApril 11, 2026By

Key Takeaways

  • The Plus Addons for Elementor Video widget allows users to add different CSS filter effects to videos.
  • Users can apply different CSS filters for normal and hover states to create unique effects.
  • The Video widget requires installation and activation of The Plus Addons for Elementor to function.
Table Of Content

Are you looking to add some unique effects to your Elementor videos? With the Video widget from The Plus Addons for Elementor, you can add different CSS filter effects to your videos.


To check the complete feature overview documentation of The Plus Addons for Elementor Video widget, click here.

Requirement  – This widget is a part of The Plus Addons for Elementor, make sure its installed & activated to enjoy all its powers.

LIVE WIDGET LINK

To do this add the Video widget from The Plus Addons for Elementor to the page and follow the steps. 

1. Select the appropriate source from the Source dropdown under the Video tab.

2. After that add the video as per the selected source.

3. Then go to the Style > Video Styling tab.

4. From the CSS Filters section you can add different CSS filter effects.

Video player css filters how to add a css filter to a video in elementor? From the plus addons for elementor

Note: You can add different CSS filters for normal and hover states to create more unique effects.

Now you’ll see your CSS filters applied to your video.

Video player self hosted demo 1 how to add a css filter to a video in elementor? From the plus addons for elementor

About the Author

Photo of Aditya Sharma CMO of The Plus Addons for Elementor
CMO · The Plus Addons for Elementor · 10 years experience

He has spent years in the WordPress ecosystem building, breaking, and optimizing sites until they actually perform. He works at the intersection of speed, growth, and usability, helping creators ship websites that load fast and convert. An active WordPress community contributor sharing through tools, tutorials, and direct collaboration. Tested practice, not theory.

WordPressElementorn8nAIClaudeAutomationServer
LinkedIn X GitHub YouTube Website
Get Instant Answers to all your questions about The Plus Addons for Elementor, trained on 1000+ Docs and Videos

Related Frequently Asked Questions

What should I do if the CSS filters are not applying to my video?

If the CSS filters are not showing up on your video, ensure that you have correctly added the Video widget from The Plus Addons for Elementor and selected the appropriate video source. Sometimes, filters may not apply if the video is not properly linked or if there are conflicting styles in your theme. Double-check the settings in the Style > Video Styling tab to confirm that the filters are set correctly.

What types of CSS filters can I apply to my video?

The Plus Addons for Elementor allows you to apply various CSS filter effects to your videos, though the specific types of filters are not detailed on the page. Common filters include blur, brightness, and contrast adjustments. Experiment with different filters to see which best enhances your video's visual appeal.

Does the Video widget work with all video sources?

The Video widget from The Plus Addons for Elementor supports various video sources, but you need to select the appropriate source from the dropdown under the Video tab. Ensure that the source you choose is compatible with the widget to avoid issues with playback.

What happens after I add CSS filters to my video?

After adding CSS filters to your video, you should see the effects applied immediately in the preview. This allows you to adjust and fine-tune the filters in real-time. If you notice any discrepancies, check your settings in the Style > Video Styling tab to ensure everything is configured correctly.

Are there any limitations when using CSS filters on videos?

While CSS filters can enhance your videos, they may impact performance, especially on mobile devices or older browsers. It's essential to test your video across different platforms to ensure that the filters do not slow down page loading times or affect user experience.

Last reviewed: April 11, 2026

Related Docs