CSS filter generator — adjust photos with brightness, blur, sepia and more

How to use the CSS filter generator

1. Drag any of the nine sliders: blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate and sepia.
2. Compare the Original and Filtered sample photos in the preview.
3. Copy the filter: line and add it to the rule for your image, video or element.

What it does and when to use it

The filter property applies photo-style adjustments while the page is drawn. It is handy for hover effects, such as a greyscale logo that turns to full colour on hover, for toning down a busy background photo, or for giving a set of product shots one consistent warm look without editing every file.

Because the effect happens in the browser, the original file stays as it is. If you need a permanent edited copy, use the image grayscale tool or the image blur tool instead. To blur only what sits behind a panel, use the backdrop filter generator.

How it works

Every slider has a neutral value: 0 for blur, grayscale, hue-rotate, invert and sepia, and 100% for brightness, contrast, opacity and saturate. The tool skips any slider at its neutral value and joins the rest in this order:

blur → brightness → contrast → grayscale → hue-rotate → invert → opacity → saturate → sepia

Blur is written in px, hue in deg, and everything else in %. If nothing has changed, you get filter: none;. MDN lists filter as Baseline widely available since September 2016.

Worked examples

The starting look. With the default sliders the output is filter: brightness(110%) contrast(110%) saturate(130%); That is a gentle boost that suits dull product photos.

Old-photo tone. Brightness, contrast and saturate back at 100%, sepia at 80%: filter: sepia(80%);

A faded, out-of-focus layer. Blur 4 px and opacity 60%, the rest neutral: filter: blur(4px) opacity(60%); This works well for a photo behind a heading, so the text stands out.

Limits and tips

• Text inside a filtered element changes too. Low brightness or contrast can make labels hard to read, so check them with the contrast checker.
• Large blurs on big areas are costly to draw, especially while scrolling or animating. Keep blurred layers small, or use a pre-blurred image.
• invert(100%) is not a dark mode. It flips photos and brand colours too. Write proper dark colours instead.
• Hue-rotate shifts every colour by the same angle, so skin tones and logos shift as well. Use it for decorative shapes, not people or brand marks.
• The sample photo is a built-in drawing; the CSS works the same on any image.