Does the order of CSS filter functions matter?

Yes. The W3C Filter Effects spec says the functions in a filter list are applied in the order provided, each to the result of the one before. This tool always writes one order, blur first and drop-shadow last, so the shadow is cast by the image after the other filters: with opacity(50%) earlier in the list the shadow is fainter too. For another order, edit the copied value.

How do I animate between two filters with a CSS transition?

Turn off Leave out unchanged filters so every output lists all nine functions in the same order. Under section 14.1 of the Filter Effects spec two lists are interpolated function by function, and a shorter list is padded at its end with the missing functions at their starting values, so lists with different functions in the same place do not line up; writing all nine avoids that.

How do I use the SVG filter export?

Paste the SVG into your HTML and set filter: url(#user-filter); on the element. The filter carries color-interpolation-filters set to sRGB, because CSS filter functions work in sRGB while SVG filter primitives default to linearRGB (sections 5 and 9.1 of the spec); without it the SVG version would not match the preview.

Why is opacity a separate class in the Tailwind output?

Tailwind's filter utilities are blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, saturate and sepia, with none for the opacity() function, so the output uses opacity-[50%], which sets the element's opacity property. It fades the element too, but it is a separate property from filter.

What happens if I type 250 for brightness?

The box keeps what you typed and shows Brightness must be from 0 to 200. The filter keeps its last valid value. A cleared box asks for a number and does not write 0. Nothing is clamped without a message.

Can I use my own image?

Type the address of an image on the web and the preview loads it from the site that hosts it; there is no file upload. The starting sample comes from picsum.photos. If your address fails, the page says so and shows the sample.

CSS Filter Generator

Combine blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia and drop-shadow on a preview; copy CSS, Tailwind or an SVG filter. How it works

filter: none;

Blur0px

Brightness100%

Contrast100%

Grayscale0%

Hue Rotate0deg

Invert0%

Opacity100%

Saturate100%

Sepia0%

About the CSS Filter Generator

The CSS filter property takes ten functions, blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia and drop-shadow, and applies them in the order they are written (W3C Filter Effects Module Level 1). The CSS Filter Generator writes them in that order and leaves out any at its starting value, so the Vintage preset is filter: brightness(90%) contrast(110%) sepia(40%);.

The filter functions, their range here and the SVG export

Function	Range in this tool	Starting value	SVG primitive
blur	0 to 20 px	0px	feGaussianBlur
brightness	0 to 200%	100%	feComponentTransfer
contrast	0 to 200%	100%	feComponentTransfer
grayscale	0 to 100%	0%	feColorMatrix
hue-rotate	0 to 360deg	0deg	feColorMatrix
invert	0 to 100%	0%	feColorMatrix
opacity	0 to 100%	100%	feComponentTransfer
saturate	0 to 200%	100%	feColorMatrix
sepia	0 to 100%	0%	feColorMatrix

drop-shadow takes an X and Y offset of -50 to 50 px, a blur of 0 to 50 px and a color, starts at 4px 4px 8px #000000 and becomes feDropShadow.

The presets as CSS and Tailwind

Preset	filter	Tailwind classes
Grayscale	grayscale(100%)	grayscale-[100%]
Vintage	brightness(90%) contrast(110%) sepia(40%)	brightness-[90%] contrast-[110%] sepia-[40%]
High Contrast	contrast(200%) saturate(150%)	contrast-[200%] saturate-[150%]
Night Vision	brightness(60%) hue-rotate(90deg) saturate(200%)	brightness-[60%] hue-rotate-[90deg] saturate-[200%]
X-Ray	grayscale(100%) invert(100%)	grayscale-[100%] invert-[100%]

This is the output with Leave out unchanged filters on, which is the default; with it off, each line lists all nine functions. Choosing a preset also switches the drop shadow off.

Frequently asked questions

Does the order of CSS filter functions matter?: Yes. The W3C Filter Effects spec says the functions in a filter list are applied in the order provided, each to the result of the one before. This tool always writes one order, blur first and drop-shadow last, so the shadow is cast by the image after the other filters: with opacity(50%) earlier in the list the shadow is fainter too. For another order, edit the copied value.
How do I animate between two filters with a CSS transition?: Turn off Leave out unchanged filters so every output lists all nine functions in the same order. Under section 14.1 of the Filter Effects spec two lists are interpolated function by function, and a shorter list is padded at its end with the missing functions at their starting values, so lists with different functions in the same place do not line up; writing all nine avoids that.
How do I use the SVG filter export?: Paste the SVG into your HTML and set filter: url(#user-filter); on the element. The filter carries color-interpolation-filters set to sRGB, because CSS filter functions work in sRGB while SVG filter primitives default to linearRGB (sections 5 and 9.1 of the spec); without it the SVG version would not match the preview.
Why is opacity a separate class in the Tailwind output?: Tailwind's filter utilities are blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, saturate and sepia, with none for the opacity() function, so the output uses opacity-[50%], which sets the element's opacity property. It fades the element too, but it is a separate property from filter.
What happens if I type 250 for brightness?: The box keeps what you typed and shows Brightness must be from 0 to 200. The filter keeps its last valid value. A cleared box asks for a number and does not write 0. Nothing is clamped without a message.
Can I use my own image?: Type the address of an image on the web and the preview loads it from the site that hosts it; there is no file upload. The starting sample comes from picsum.photos. If your address fails, the page says so and shows the sample.

Network use

This tool loads a sample image from picsum.photos by default, and any image URL you type is requested from its host. Privacy policy

Grayscale logos, darkened photos and outline shadows

Set an image effect in CSS instead of editing the picture: a row of partner logos at grayscale(100%) that get their color back on hover, a hero photo at brightness(60%) so white text on it stays readable, or a sepia look. Move a slider or type a value, or start from Grayscale, Vintage, High Contrast, Night Vision or X-Ray, and copy the result as a filter declaration, a --filter variable, Tailwind classes or an SVG filter.

drop-shadow() is the one to use for a transparent PNG or an icon, because its shadow follows the visible outline instead of the rectangle that box-shadow uses. MDN notes two other differences: it takes no inset keyword and no spread value, and any filter written after it also changes the shadow.

How the filter value is written

filter: f1(v1) f2(v2) … fn(vn)

The browser applies the functions in the order written, each to the result of the one before, and in the sRGB color space (W3C Filter Effects Module Level 1, section 5). This tool always writes them in one order: blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia, then drop-shadow, so a drop shadow is cast by the image after the other filters. With Leave out unchanged filters on (the default), a function at its starting value (blur 0px, hue-rotate 0deg, brightness, contrast, opacity and saturate 100%, grayscale, invert and sepia 0%) is not written; with it off, all nine are written. A drop shadow you switch on is always written, even at its starting drop-shadow(4px 4px 8px #000000).

Example: Vintage sets brightness 90%, contrast 110% and sepia 40%, which gives filter: brightness(90%) contrast(110%) sepia(40%);. In the SVG export the same contrast becomes a linear transfer with slope 1.1 and intercept -0.05, from slope = c, intercept = (1 − c) ÷ 2 with c = 1.1, and the <filter> carries color-interpolation-filters set to sRGB, because SVG filter primitives otherwise work in linearRGB (section 9.1).

Related Tools

View all tools

CSS

CSS Box Shadow Generator

Build a CSS box-shadow with up to 5 layers: offset, blur, spread, color, opacity and inset. Copy CSS, Tailwind, SCSS, CSS-in-JS or a variable.

CSS

CSS Text Shadow Generator

Stack up to 5 text-shadow layers with offset, blur, color and opacity, preview them on light or dark, and copy the CSS, variable or Tailwind class.

CSS

CSS Gradient Generator

Build linear, radial and conic gradients from color stops, ten presets or the colors of an image you upload, then copy CSS, Tailwind, React or SCSS code.

CSS

CSS Border Radius Generator

Set a CSS border-radius for each corner in px or %, with elliptical radii and a live preview. Copy CSS, Tailwind, React Native, SCSS or clip-path code.

CSS

CSS Transform Generator

Set translate, rotate, scale, skew, 3D rotation and perspective and see the CSS transform on a live box. Copy CSS, Tailwind, SCSS or custom properties.

CSS

CSS Flexbox Generator

Set flex-direction, wrap, justify-content, align-items, gap and per-item flex, order and align-self, then copy the code as CSS, SCSS, variables or Tailwind.