CSS Filter Generator
Adjust blur, brightness, contrast, grayscale, hue-rotate and more — live preview updates as you move sliders. Copy the filter CSS with one click.
CSS generated is free to use — no attribution required.
How do you use the CSS filter generator?
Adjust the sliders for each filter function. The conic-gradient preview updates in real time so you can see how filters stack. Only non-default values are included in the generated CSS — if brightness is 100% (the default), it is omitted.
What is the CSS filter syntax?
The filter property accepts a space-separated list of filter functions: filter: blur(4px) brightness(110%) contrast(120%). Functions are applied in order, left to right.
What are the available CSS filter functions?
blur(px) — applies a Gaussian blur. brightness(%) — adjusts lightness (100% = original). contrast(%) — adjusts contrast. grayscale(%) — converts to grayscale. hue-rotate(deg) — rotates hue on the color wheel. opacity(%) — adjusts transparency (same as the opacity property). saturate(%) — adjusts color saturation. sepia(%) — applies a sepia tone.
What is the difference between CSS filter and backdrop-filter?
The filter property applies to the element itself. backdrop-filter applies to everything behind the element — useful for frosted glass effects on overlays and modals.
What is the browser compatibility for CSS filter?
CSS filter is supported in all modern browsers. No vendor prefixes are required in 2024+. The -webkit-filter prefix was required for Safari before version 9.1 (2016).