CSS Filter Generator

About this tool

The CSS Filter Generator lets you build a filter property value by adjusting individual filter functions with sliders, then copy the result straight into your stylesheet.

What each filter does

• Brightness — scales overall lightness. 100% is unchanged; 0% is black; 200% doubles the brightness.
• Contrast — increases or decreases the difference between light and dark areas. 0% produces a flat grey image.
• Saturate — controls colour intensity. 0% renders the image fully greyscale; 200% makes colours very vivid.
• Hue Rotate — shifts all hues around the colour wheel by the given number of degrees.
• Invert — inverts colours, like a photo negative. 100% fully inverts.
• Sepia — applies a warm brownish tone reminiscent of old photographs.
• Grayscale — removes colour. 100% is fully grey; 0% is full colour.
• Blur — applies a Gaussian blur measured in pixels. Higher values produce a softer, blurrier result.
• Opacity — controls transparency. Works the same as the opacity property but composited with the other filters.

Performance

CSS filters are GPU-accelerated in every modern browser. Applying a filter promotes the element to its own compositing layer, which keeps animations smooth. For static images the performance cost is negligible. For animated or frequently-repainted elements, keep filters simple — blur() in particular can be expensive at large radii.

Browser support

The filter property is supported in all modern browsers. The -webkit-filter prefix is included in the output for compatibility with older Safari and Chrome versions, though it is no longer required for any current browser release.

filter vs backdrop-filter

filter applies the effect to the element itself and all of its children. backdrop-filter applies the effect to whatever is rendered behind the element — useful for frosted-glass overlays. The same filter functions work with both properties, but backdrop-filter requires a partially transparent background on the element to be visible.