CSS Filter Generator
12 toolsDesign blur, brightness, and other CSS filters visually.
Runs in your browser — your files and text stay on your device
Design CSS filters such as blur, brightness, contrast and saturate on a live preview and copy the code. Stack several filters to get the look you want. Filters can be costly on large elements, so test performance on slower devices.
Flexbox PlaygroundGrid GeneratorBox ShadowText ShadowBorder RadiusClip PathGlassmorphismAnimationEasing CurveFilterFluid TypographyUnit Converter
Blur0px
Brightness100%
Contrast100%
Saturate100%
Grayscale0%
Sepia0%
Hue rotate0deg
filter: blur(0px) brightness(100%) contrast(100%) saturate(100%) grayscale(0%) sepia(0%) hue-rotate(0deg);How to use this tool
- 1Adjust the blur, brightness, contrast, saturation, grayscale, sepia, and hue-rotate sliders.
- 2Watch the live preview update.
- 3Copy the combined filter CSS value.
Frequently asked questions
Can I apply this to an actual photo, not just the preview box?
Yes — copy the filter value and apply it to any element's CSS, including an <img>.
Is this generated on a server?
No — the preview and CSS are computed entirely in your browser.