CSS Filter Generator

Eight sliders build a single filter value. Anything left at its neutral setting is kept out of the CSS, so the rule stays as short as the effect.

Runs in your browserFree, no sign-upLast reviewed October 8, 2026

Live preview

CSS

.element {
  filter: none;
}

Values

Property: filter
Functions applied: 0
Value: none

Quick answers

How do I make an image black and white in CSS?: Apply filter: grayscale(100%) to the img element. Lower percentages keep some colour: 50% is half faded. To bring the colour back on hover, set filter: none on the hover state and add transition: filter 300ms.
What CSS filter functions are there?: Ten: blur(), brightness(), contrast(), drop-shadow(), grayscale(), hue-rotate(), invert(), opacity(), saturate() and sepia(). A filter value can also reference an SVG filter with url(). This tool covers eight of the ten, leaving out drop-shadow() and opacity().
Does the order of CSS filters matter?: Yes. Functions run left to right and each works on the previous result. sepia(100%) hue-rotate(180deg) tints the image brown and then rotates that brown to a cool blue tone; reversed, the hue shift is applied first and the sepia then turns everything brown.
What is the difference between filter and backdrop-filter?: filter changes the element itself, including its text and children. backdrop-filter leaves the element alone and changes whatever is painted behind it, seen through the element's background. That background must be partly transparent or the effect is hidden.
How do I blur a background image without blurring the text?: Do not put filter: blur() on the element holding the text, because a filter applies to all its children. Put the image on a separate layer behind the text and blur that, or give the text panel a translucent background and backdrop-filter: blur(12px).
Can CSS filters be used on elements other than images?: Yes. filter works on any element: a div, a button, a video, an iframe or a whole page section. Everything inside the element is filtered as one picture, which is why the preview here uses a styled box and not a photo.

What CSS Filter Generator does

This CSS filter generator combines up to eight filter functions into one declaration: blur (0 to 20px), brightness and contrast (0 to 200%), saturation (0 to 300%), grayscale, sepia and invert (0 to 100%) and hue rotate (0 to 360deg). Only the sliders you move appear in the output, so setting Grayscale to 100 gives filter: grayscale(100%) and nothing else. The functions are always written in the same order: blur, brightness, contrast, saturate, grayscale, sepia, hue-rotate, invert. Order changes the result, so that sequence matters and is explained below. Tick one box to output backdrop-filter in place of filter. The tool does not include drop-shadow() or opacity(), and the preview is a built-in colour sample, not your own image.

CSS filter functions: ranges, neutral values and what the extremes do

The slider range is what this tool offers. The neutral value is the setting at which the function has no effect and is left out of the output.

Function	Slider range	Neutral value	At the minimum	At the maximum
blur()	0 to 20px, 0.5px steps	0px	Sharp	blur(20px): detail is gone, only soft colour areas remain
brightness()	0 to 200%	100%	brightness(0%): solid black	brightness(200%): twice as bright, light areas wash out
contrast()	0 to 200%	100%	contrast(0%): flat mid grey	contrast(200%): darks and lights pushed hard apart
saturate()	0 to 300%	100%	saturate(0%): no colour at all	saturate(300%): very intense colour
grayscale()	0 to 100%	0%	Full colour	grayscale(100%): shades of grey only
sepia()	0 to 100%	0%	Full colour	sepia(100%): brown-toned, like an old photograph
hue-rotate()	0 to 360deg	0deg	Colours unchanged	hue-rotate(360deg): a full turn, visually the same as 0
invert()	0 to 100%	0%	Colours unchanged	invert(100%): a full negative. 50% gives uniform grey

The CSS functions themselves accept values beyond these sliders, for example brightness(300%) or blur(40px). Edit the number in the copied rule if you need more. Dragging Hue rotate to 360 still writes hue-rotate(360deg), which you can delete.

CSS filter effects and the exact rule for each

Each result is the tool's output for the slider positions given. Sliders not mentioned stay at their neutral value.

Black and white photo

Grayscale 100

filter: grayscale(100%);

Punchy black and white

Brightness 90, Contrast 120, Grayscale 100

filter: brightness(90%) contrast(120%) grayscale(100%);

Warm vintage look

Brightness 110, Contrast 110, Saturation 130, Sepia 30

filter: brightness(110%) contrast(110%) saturate(130%) sepia(30%);

Dimmed, softened page behind a dialog

Blur 3, Brightness 60

filter: blur(3px) brightness(60%);

Quick dark version of a light image or embedded page

Hue rotate 180, Invert 100

filter: hue-rotate(180deg) invert(100%);

Inverting flips light to dark, and the half-turn of hue brings colours back close to where they started so blues stay blue.

Frosted glass panel

Blur 12, Saturation 180, Output as backdrop-filter ticked

backdrop-filter: blur(12px) saturate(180%);

Pair it with a translucent background such as background: rgba(255, 255, 255, 0.6) on the same element.

Half-pixel blur steps

Blur 2.5

filter: blur(2.5px);

Nothing changed

All sliders at their starting values

filter: none;

CSS filter order: the fixed sequence this tool uses

A filter list is a pipeline. The browser applies the first function to the element, hands that result to the second, and so on. This tool always writes the functions in one sequence: blur, brightness, contrast, saturate, grayscale, sepia, hue-rotate, invert. You cannot reorder them with the controls, so it helps to know what that sequence implies.

Tone adjustments come first. Brightness, contrast and saturation act on the original colours, before anything removes them.

Grayscale comes after saturation. At 100% it discards all colour, so a Saturation setting has next to no visible effect once Grayscale is at 100: there is no colour left to show it. Use partial Grayscale, such as 50, if you want the two to work together.

Sepia comes after grayscale. With both at 100 the result is a sepia image, since sepia has the last word on colour.

Hue-rotate comes after sepia, which makes tinting possible: Sepia 100 with Hue rotate 180 gives sepia(100%) hue-rotate(180deg), a single cool blue tone across the whole image. Other angles give other tints.

Invert is last, so it produces a negative of everything before it.

If you need a different order, for example blur after the contrast boost, copy the rule and rearrange the functions by hand. The syntax is just a space-separated list.

filter vs backdrop-filter

	filter	backdrop-filter
What is changed	The element and everything inside it	The page content behind the element
Element's own text and children	Filtered too	Left sharp and untouched
Needs a see-through background	No	Yes, a transparent or translucent one
Typical use	Photo effects, hover states, dimming a section	Frosted glass headers, sidebars, cards and modals
Accepts the same functions	Yes	Yes
Shown in this tool's preview	Yes	No, see the note

When Output as backdrop-filter is ticked, the CSS panel switches property but the preview box looks unfiltered. The sample has a solid gradient background, so there is nothing visible behind it to filter. Test the copied rule on a translucent element in your own page. Older Safari versions need the -webkit-backdrop-filter prefix, which the tool does not add.

Side effects of filters worth knowing before you ship

Blur softens the element's outer edge as well as its contents, and the blur spills past the box. For a blurred image with crisp edges, put it in a wrapper with overflow: hidden and scale the image up slightly.
Any filter other than none makes the element the containing block for position: fixed descendants. A fixed header or modal inside a filtered wrapper will position itself against that wrapper and scroll with it.
A filtered element forms its own stacking context, which can change how z-index behaves for its children.
hue-rotate() is a matrix approximation, not a true rotation around the colour wheel, so brightness can shift as the angle changes. Do not expect a specific brand colour from it.
Animating blur() is costly because the browser redraws the blur on every frame. Animating opacity between a sharp layer and a pre-blurred copy is much cheaper.
Filtered text can become hard to read. Check contrast after applying brightness, contrast or invert to anything that contains words.

How to get your result

1
Drag Blur, Brightness, Contrast and Saturation to adjust the basics. 100% is the neutral point for the three percentage sliders.
2
Add Grayscale, Sepia, Hue rotate or Invert for colour effects. These start at 0, which means off.
3
Watch the live preview: an orange-to-indigo gradient with a yellow circle and white text, so both colour shifts and edge softening are visible.
4
Tick Output as backdrop-filter if the effect should apply to whatever sits behind the element.
5
Check Functions applied and Value in the stats, then copy the .element rule or download it as style.css.

Common questions

Can I upload my own image to preview the filter?

No. The preview is a fixed sample made of a gradient, a circle and text, chosen so colour and sharpness changes are both easy to see. Copy the rule and apply it to your own image to see the real result. To edit and download a filtered image file, use an image filter tool instead.

Why is drop-shadow() missing?

This tool covers the eight colour and blur functions. drop-shadow() takes offsets, a blur and a colour, so it needs its own controls. Add it by hand at the end of the list, for example filter: grayscale(100%) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3)).

How do I remove a filter on hover?

Set the filter on the element and filter: none on its hover state, with a transition on the base rule: img { filter: grayscale(100%); transition: filter 300ms; } img:hover { filter: none; }. The browser animates between the two.

Is saturate(0%) the same as grayscale(100%)?

Yes, they produce the same result: both remove all colour and leave only lightness. grayscale() is the clearer choice when you want black and white, while saturate() is the one that can also go above 100% to intensify colour.

Can a CSS filter change a black icon to a specific colour?

Only approximately, and not with this tool alone. Recolouring to an exact hex needs a tuned chain of invert, sepia, saturate, hue-rotate, brightness and contrast values. For single-colour SVG icons, setting fill: currentColor and changing the text colour is simpler and exact.

Do CSS filters work in all browsers?

The filter property and all the functions generated here work unprefixed in current versions of Chrome, Edge, Firefox and Safari. backdrop-filter is also supported in current versions of all four, with a -webkit- prefix required by older Safari releases.

Does a filter change the image file or affect page weight?

No. The original file is downloaded unchanged and the effect is applied when the browser draws it, so one image can be shown in colour, in grey and blurred without three separate files.

Why does brightness(0%) give black but contrast(0%) give grey?

Brightness multiplies every colour value, so multiplying by zero leaves black. Contrast pulls every value towards the midpoint, and at 0% every pixel lands exactly on that mid grey.