Skip to content
Tools/CSS Filter Generator

CSS Filter Generator

Fine-tune blur, brightness, contrast, saturation, hue and more. Live preview — copy the CSS.

Presets

Filter Functions

blur
0px
brightness
100%
contrast
100%
saturate
100%
grayscale
0%
sepia
0%
hue-rotate
0deg
invert
0%
opacity
100%

Preview Subject

Live Preview

Original
Filtered
filter value
none
CSS Output
.element {
  filter: none;
}

Tip: Use backdrop-filter instead of filter to apply effects to content behind a frosted-glass element (e.g. blur the background, not the element itself).

Related Tools