CSS Filter Generator
Design a CSS filter with live controls. Adjust blur, brightness, contrast, grayscale, sepia, saturation, hue, invert and opacity, watch the preview update, then copy the generated filter rule.
How to generate a CSS filter
- Drag the sliders for blur, brightness, contrast and the other effects.
- Watch the live preview to see how the filter changes the image.
- Copy the filter code from the output box into your stylesheet.
Examples
Soft, brighter look
blur 2px, brightness 120%, contrast 110%
filter: blur(2px) brightness(120%) contrast(110%);
Full grayscale
grayscale 100%
filter: grayscale(100%);
Frequently asked questions
Which CSS filter functions does this tool support?
It covers the most used ones: blur, brightness, contrast, grayscale, sepia, saturate, hue-rotate, invert and opacity. They are combined into a single filter property in the standard order.
Why are some functions missing from the output?
Only values that differ from their default are written out. Brightness, contrast, saturate and opacity default to 100 percent and the rest default to 0, so an untouched effect adds nothing and your CSS stays short.
What is the difference between brightness and opacity?
Brightness scales how light or dark the pixels are, so 0 percent is black and values above 100 percent overexpose. Opacity controls transparency, so 0 percent makes the element see-through while the colors themselves are unchanged.
Does the order of filter functions matter?
Yes. CSS applies filters left to right, so blurring before adjusting contrast looks different from doing it the other way around. This tool always emits a consistent, canonical order so your results are predictable.
Do CSS filters hurt performance?
Most filters are cheap, but a large blur radius or animating filters every frame can be costly to repaint, especially on big elements. For smooth animation keep the blur modest and test on lower-end devices.
Is my work sent to a server?
No. The preview and the generated CSS are computed entirely in your browser, so nothing about your settings leaves your device.
Related tools
CSS Gradient Generator
Build linear and radial CSS gradients with a live preview. Pick colors, set the angle and copy ready-to-paste background code for your site.
Box Shadow Generator
Build CSS box-shadow visually. Drag sliders for offset, blur, spread, color and opacity, see a live preview, and copy the box-shadow code.
Color Contrast Checker
Check the WCAG contrast ratio between two colors. See AA and AAA pass or fail for normal and large text, with a live preview. Runs in your browser.
.env to JSON
Convert a .env file to JSON, or JSON back to .env. Parses KEY=value lines, comments, quotes and export. Runs entirely in your browser.
Aspect Ratio Calculator
Calculate aspect ratios fast. Enter a ratio like 16:9 and one dimension to get the other, or enter width and height to simplify the ratio.
Base58 Encoder
Encode and decode Base58 online with the Bitcoin alphabet. Convert text to Base58 or back, UTF-8 safe, no confusing 0 O I l. Runs in your browser.