Can I use this on background images and elements?

Yes. The generated filter property applies to any element. For frosted-glass effects behind an element, pair it with backdrop-filter.

How do I make an image black and white in CSS?

Use filter: grayscale(100%);. This generator sets it for you when you drag the grayscale slider to 100, and combines it with any other filters you add.

Does the order of filter functions matter?

Yes. Filters are applied left to right, so blur(2px) brightness(120%) is not identical to brightness(120%) blur(2px). The generator chains them in a consistent order for predictable results.

Is anything uploaded?

No — the preview and CSS are generated entirely in your browser.

CSS Filter Generator

Q: Which filter functions are supported?

It covers blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate and sepia — chained in the order CSS expects.

This tool builds a CSS filter chain visually, with live sliders for each filter function and a real-time preview. Adjust blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate and sepia, then copy the exact declaration. It saves you remembering each function’s unit and value range.

How it works

The CSS filter property takes a space-separated list of functions, applied left to right. Each slider maps to one function with its correct unit:

Function	Unit	Default
blur	px	0
brightness, contrast, saturate	%	100
grayscale, invert, opacity, sepia	%	0 / 100
hue-rotate	deg	0

The generator only includes functions that differ from their default value, so the output stays clean and minimal. The same string powers the live preview.

Example

Setting grayscale to 100, brightness to 110 and a 2px blur produces:

filter: blur(2px) brightness(110%) grayscale(100%);

Functions left at their default (like contrast 100% or sepia 0%) are omitted. Everything runs locally in your browser — nothing is uploaded.

Functions left at their default value are skipped, so the output stays clean and minimal. Everything runs locally in your browser — nothing is uploaded.