CSS Filter Generator
Adjust blur, brightness, contrast, saturation and more with sliders to instantly generate CSS filter code
도구를 불러오는 중…
🔒 Everything runs 100% in your browser. Your files and input are never uploaded to any server.
This tool lets you adjust blur, brightness, contrast, grayscale, hue-rotate, saturate, and sepia with sliders while watching the result in a live preview. It's handy for web developers and designers who want to dial in filter values for images or boxes by eye and copy them straight into their code.
How to use
- Move the sliders to adjust the filter effect you want.
- Watch the result apply in real time in the preview box up top.
- Copy the finished filter CSS and paste it onto the element you want.
- If you're not happy with it, use the reset button to return to the defaults.
FAQ
- Are default-value sliders included in the CSS?
- No. Filters at their default value (100% for brightness, contrast, saturation, etc.) or with blur at 0 are automatically dropped from the output, so only the values you actually need are generated cleanly.
- Are the values I enter sent to a server?
- They're not. All calculations and previews happen entirely within your browser, and no data is ever sent to a server.
- Can I layer multiple filters at once?
- Yes. When you adjust several sliders together, they're combined into a single filter value joined by spaces, like blur(2px) brightness(110%).