All tools · 🎨 Design
🎛️ CSS Filter Generator
CSS filter() applies graphic effects like blur, brightness, contrast, grayscale, sepia, hue-rotate, and drop-shadow. Adjust sliders and see them composited on a sample image in real time. Copy the CSS filter string.
Examples
filter: sepia(60%) contrast(110%) brightness(95%);filter: brightness(0.85) contrast(1.1);filter: blur(8px);Frequently asked questions
filter vs backdrop-filter?
filter applies to the element itself. backdrop-filter applies to what is behind the element — used for frosted-glass / blur-behind UI effects.
Is filter expensive to render?
Blur and large drop-shadow are GPU-heavy. Keep them off elements that animate frequently, or use will-change: filter cautiously.
Can I combine multiple filters?
Yes, space-separate them: filter: blur(2px) grayscale(50%); They apply in order.
About this tool
CSS Filter Generator runs entirely in your browser using standard Web APIs. No data is sent to any server. The source for this tool is in our public GitHub repository.
Related tools
- 🎨 CSS Box Shadow Generator — Visual box-shadow editor with live preview. Copy CSS instantly.
- 🌈 CSS Gradient Generator — Build linear and radial CSS gradients with live preview. Copy the CSS.
- 🟫 Border Radius Generator — Generate CSS border-radius with per-corner control. Live preview.
Why this tool
vs typical free web-tool sites
| 1vw | Typical free site | |
|---|---|---|
| Price | Free | Free |
| Signup required | No | Often (for premium features) |
| Ads inside the tool | No | Yes (banner + video) |
| Data sent to server | No (browser-only) | Yes (inputs analyzed for ads) |
| Total tools | 96 | Often <20 or scattered across sites |
| Bookmarkable URL per tool | Yes | Mixed |
| Loads in under 1s | Yes (static) | Often slow (ad tracking) |
| Multilingual | EN / ES / PT / FR / DE | Usually EN only |
| Open source | Yes | No |