Générateur de filtres CSS
Adjust CSS filter properties with sliders and see the result in real time. Copy the generated code.
Filter Controls
Preview
'/%3E%3Ccircle cx='200' cy='130' r='80' fill='%23fff' opacity='0.4'/%3E%3Ctext x='200' y='138' text-anchor='middle' font-size='22' font-family='sans-serif' fill='%23333'%3EPreview Image%3C/text%3E%3C/svg%3E)
Generated CSS
How It Works
- Adjust filter sliders: Use the sliders to control blur, brightness, contrast, saturation, hue rotation, opacity, grayscale, sepia, and invert.
- Preview in real time: The sample image or element updates instantly as you move each slider.
- Copy the CSS: The complete filter property value (e.g., filter: brightness(1.2) contrast(1.5) saturate(0.8)) is ready to copy and paste into your stylesheet.
Why Use CSS Filter Generator?
CSS filters let you apply image processing effects — blur, contrast, brightness, color shifts — directly in the browser without Photoshop or image editing software. They work on images, videos, and any HTML element. Building the filter property string by hand requires memorizing the exact function names and valid value ranges. This generator provides intuitive sliders with visual feedback so you can dial in the exact look you want.
Features
- All CSS filter functions: Blur, brightness, contrast, saturate, hue-rotate, opacity, grayscale, sepia, invert, and drop-shadow.
- Live preview: See changes on a sample image or your own image in real time.
- Value validation: Sliders enforce valid ranges for each filter function.
- Reset individual filters: Reset any single filter to its default without affecting others.
- Combined output: All selected filters are combined into a single filter property string.
Frequently Asked Questions
Can CSS filters be applied to video elements?
Yes. CSS filter works on any element including <video>, <img>, <div>, and <canvas>. When applied to a video, the filter is rendered in real time during playback.
What is the difference between filter and backdrop-filter?
filter applies the effect to the element itself and all its children. backdrop-filter applies the effect to the content behind (underneath) the element — commonly used for frosted glass effects.
Do CSS filters affect performance?
Filters with blur or complex compositing can be GPU-intensive. For animated filters, ensure the element is on its own compositing layer (add transform: translateZ(0) as a hint). Static filters on images and icons have minimal performance impact.