---
title: "How to Add a CSS Filter to a Video in Elementor?"
url: https://theplusaddons.com/docs/add-a-css-filter-to-a-video-in-elementor/
date: 2025-01-10
modified: 2026-09-28
lang: en
author: "Aditya Sharma"
description: "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..."
image: https://theplusaddons.com/wp-content/uploads/2025/01/How-to-Add-a-CSS-Filter-to-a-Video-in-Elementor_-1024x536.jpg
word_count: 170
---

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

## 

- The Plus Addons for Elementor Video widget adds different CSS filter effects to videos inside Elementor.
- Video widget setup starts by selecting a source from the Source dropdown under the Video tab, then adding the video for that source.
- Style > Video Styling includes a CSS Filters section, and it supports separate normal and hover states for more unique effects.

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](https://theplusaddons.com/docs//add-video-player-in-elementor/).

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

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/video-player/)

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.

![](https://theplusaddons.com/wp-content/uploads/2026/09/video-player-css-filters.webp)

> *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.

![](https://theplusaddons.com/wp-content/uploads/2026/09/video-player-self-hosted-demo-1.webp)

## Frequently Asked Questions

**Q: Why isn’t the CSS filter showing on my Elementor video?**
A: The filter only appears after the Video widget is added, a source is chosen from the Source dropdown, and the video is inserted for that source. The styling lives under Style > Video Styling, inside the CSS Filters section, so missing any of those pieces usually means there is nothing to style yet. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH provides this effect inside the Elementor editor.

**Q: What do I need before adding a CSS filter to a video in Elementor?**
A: The key requirement is that The Plus Addons for Elementor is installed and activated, because the Video widget comes from that plugin. Once it is active, you can work entirely inside Elementor without writing code. That matters because the CSS filter controls are part of the widget styling, not a separate custom CSS workflow.

**Q: Can I add different filter effects for hover and normal states on a video?**
A: The Video widget supports separate CSS filters for normal and hover states, which is useful when you want the video to feel interactive instead of static. A common pattern is keeping the normal state subtle and using hover to create a stronger visual change. That gives you more control over how the video reacts without changing the actual media.

**Q: How do I add a CSS filter to a video in Elementor?**
A: The workflow is straightforward: add the Video widget from The Plus Addons for Elementor, choose the source from the Source dropdown under the Video tab, add the video for that source, then open Style > Video Styling and use CSS Filters. The final result is an applied visual effect on the video itself, not on the whole section.

**Q: What kind of videos can I style with this filter effect?**
A: The page frames this as a feature of the Video widget from The Plus Addons for Elementor, so it applies to videos added through that widget in Elementor. The important part is selecting the correct source first, because the widget asks you to add the video based on that source before styling it. That keeps the filter tied to the actual embedded video element.

**Q: Where can I see more details about the Video widget before using CSS filters?**
A: The page points to two useful references: [click here](https://theplusaddons.com/docs//add-video-player-in-elementor/) for the feature overview documentation and [LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/video-player/) for the live widget view. Those links are helpful if you want to understand how the Video widget fits into The Plus Addons for Elementor before applying filters.