CSS Filter Generator
Move the sliders to adjust blur, brightness, contrast, grayscale, hue, invert, opacity, saturate and sepia. The preview applies the filter as you change it, and the output lists only the functions you have changed.
The functions follow the W3C Filter Effects Module Level 1. Nothing is uploaded or processed on a server; the preview runs in your browser.
filter: none;filter-noneHow to use it
- Pick a preset as a starting point, or start from the neutral values.
- Move a slider. The preview updates with the combined filter.
- Copy the CSS declaration, or copy the Tailwind arbitrary property if you use classes.
- Paste the value on an image, a card or any element that needs the effect.
About the CSS behind it
The filter property takes a space-separated list of functions, and they are applied in the order written. Each function has a neutral value that leaves the element unchanged: brightness(100%) is the same as no change, and blur(0) applies no blur. The generator therefore leaves out any function set to its neutral value. The definitions are in the W3C Filter Effects Module Level 1.
Filters are costly on large or animated elements, because the browser has to re-render the pixels each frame. Animate opacity or transform where you can, and keep blur values small on big surfaces. The MDN reference for the filter property lists the browser support for each function.
Frequently asked questions
- What is the difference between the filter property and box-shadow?
- filter changes how an element and its content are rendered, such as brightness or blur, and applies to the whole element. box-shadow only draws a shadow outside the box. The two can be combined on the same element.
- Why does a grayscale or sepia filter also change the colours of my images?
- Those functions recompute each pixel. grayscale(100%) maps colours to their luminance, and sepia applies a fixed colour matrix. The filter treats an image and a solid background the same way.
- Can I use a filter to recolour an icon to match a brand colour?
- Sometimes, but it is imprecise. hue-rotate and saturate can shift a colour, though they cannot reach an exact hex value. For exact colours, use an SVG fill or a mask instead.
- Does filter: blur() blur the element edges?
- Yes. blur() softens the whole element, including its edges, which is useful for placeholders and background images. The element does not get a frosted glass effect unless you use backdrop-filter on a layer above it.
Related tools and components
- Box Shadow GeneratorShadows drawn outside an element
- Glassmorphism GeneratorBackdrop blur for frosted panels
- CSS Animation GeneratorAnimate opacity and transform keyframes
- Skeleton componentLoading placeholders that use blur
- Carousel componentImage slides that often need a filter
- CSS to Tailwind ConverterConvert the CSS into classes