'/%3E%3Ccircle cx='180' cy='130' r='70' fill='%23ffffff' opacity='0.85'/%3E%3Crect x='320' y='70' width='200' height='180' rx='16' fill='%23111827' opacity='0.55'/%3E%3C/svg%3E)
Free CSS Filter Generator
The CSS Filter Generator lets you build image filter effects visually and copy the exact CSS. Adjust grayscale, sepia, blur, brightness, contrast, saturation, hue rotation, and more.
How to Use
Move the sliders and watch the sample image update live. When you are happy, copy the generated filter CSS into your stylesheet.
- Nine filter controls including blur, brightness, and hue-rotate
- Live preview image
- Copy the generated filter CSS
- Reset every slider to defaults
- Runs entirely in your browser
Related Image & Color Tools
You might also need
Tools from other categories that people pair with the CSS Filter: