CSS Filter Guide: Eight Effects, Filter Order and What Filters Cannot Do

The CSS filter property applies visual effects such as blur, brightness and sepia to an element at display time. You write one line of CSS, and an image looks vintage or washed out or black and white, while the original file stays exactly as it was. Our CSS Filter & Image Effects Generator lets you preview those effects with sliders, either on a demo graphic or on an image you choose, and copy the resulting declaration. This guide explains what each slider really does, why the order of effects matters, and what a CSS filter cannot do for you.

What a CSS filter actually changes

A filter is applied to the rendered pixels of an element, including its children, text and background. The image file on your server is untouched; the browser simply shows a processed version. That has two consequences worth stating plainly:

• Removing the CSS brings the original look straight back, so filters are good for hover effects, theming and quick experiments.
• Anyone who downloads the image gets the original, unfiltered file. If you need a permanently edited file, a CSS filter is the wrong tool; use an image editor, or one of our image tools such as the Image Inverter.

Using the generator

1. Optionally click Upload an image and choose a file. If you skip this, a small demo graphic is used.
2. Move the sliders in the Filters panel, or choose something from Quick presets.
3. Check Live Preview. The CSS under CSS Code updates as you drag.
4. Click Copy CSS and paste the line into a rule for your image or element.
5. Click Reset to return every slider to its neutral value.

The generated line for that preset is filter: brightness(105%) contrast(90%) sepia(50%) saturate(80%);. Only functions you changed appear in the output. If every slider is at its neutral value, you get filter: none;.

Your uploaded image is read by the page in your browser and shown in the preview; we watched network activity during an upload and saw no requests carrying it. One cosmetic quirk: the grey caption under the preview still says "No image uploaded" after you add one. It is a fixed line of text and does not affect the result.

The eight sliders and their ranges

Each slider maps to one CSS filter function. The ranges are what the tool allows:

• Blur (0 to 20px): blur(4px). The value is a radius in pixels, not a percentage, so the same value looks stronger on a small image than a large one.
• Brightness (0 to 200%): brightness(120%). 100% is unchanged, 0% is black, and values above 100% lighten.
• Contrast (0 to 200%): 100% is unchanged, 0% is flat grey, higher values push lights and darks apart.
• Grayscale (0 to 100%): 100% is fully black and white.
• Sepia (0 to 100%): a warm brown tone, like an old photograph.
• Hue Rotate (0 to 360 degrees): shifts every colour around the colour wheel. 180 degrees swaps colours for their approximate opposites; 360 is the same as 0.
• Saturate (0 to 300%): 100% is unchanged, 0% is grey, higher values intensify colours.
• Invert (0 to 100%): 100% produces a photographic negative.

CSS offers two more filter functions, opacity() and drop-shadow(), which this tool does not include. So the tool covers eight of the ten. Add the other two to the copied line by hand when needed, for example drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3)).

The six presets, with exact output

The Quick presets menu loads combinations you can tweak afterwards. We selected each and copied what the tool produced:

• Vintage / Sepia: brightness(105%) contrast(90%) sepia(50%) saturate(80%)
• Black & White: contrast(110%) grayscale(100%)
• Cold / Blue Tone: brightness(95%) hue-rotate(180deg) saturate(120%)
• Vivid: contrast(115%) saturate(180%)
• Dreamy / Soft Blur: blur(2px) brightness(110%) saturate(80%)
• Inverted / Dark Mode: hue-rotate(180deg) invert(100%)

Treat these as starting points. "Cold / Blue Tone" works by rotating the hue 180 degrees, which turns warm colours blue but also turns blue skies orange, so it suits some photos and not others. The inverted preset is a quick way to see how an image looks as a negative; for a real dark-mode treatment of photos, most designs leave photographs alone and only adapt UI colours.

Choosing a preset moves the sliders, so you can adjust any value afterwards. Moving a slider does not reset the preset menu, but Reset clears both.

Why the order of functions changes the result

CSS applies a list of filter functions from left to right, each one working on the output of the previous one. The same functions in a different order can give a different picture. We rendered a plain blue square (#2563eb) and sampled the result:

• grayscale(100%) sepia(100%) gave rgb(129, 115, 90), a brown tint.
• sepia(100%) grayscale(100%) gave rgb(122, 122, 122), a neutral grey.
• brightness(150%) contrast(150%) gave rgb(20, 159, 255), while contrast(150%) brightness(150%) gave rgb(0, 127, 255).

The generator always writes functions in one fixed order: blur, brightness, contrast, grayscale, sepia, hue-rotate, saturate, invert. For most single-purpose looks this does not matter. When you combine strong effects and the result is not what you expected, copy the line and reorder the functions by hand. There is no drag-to-reorder control.

Gotchas when you use filters in a real page

Filters create a new containing block

An element with a filter becomes the containing block for its position: fixed descendants. We tested a fixed child (top: 0) inside a parent placed 200px down the page. Without a filter the child sat at the top of the viewport (top = 0); with filter: blur(0px) on the parent, it moved to 200px, positioned relative to the parent. If a fixed header or modal breaks after you add a filter to an ancestor, this is why. Apply filters to the specific image rather than to a large wrapper.

A blur is not a way to hide information

Blurring text or a face with CSS does not protect anything: the original content is still in the page and in the file, and can be restored by removing the style in developer tools. To obscure sensitive content, edit the image itself (our Blur & Pixelate Image tool changes the pixels) before you publish it.

Blur softens the edges

A blurred element spreads past its own edges, so a blurred image looks slightly larger and its borders fade. A common fix is to put the image inside a wrapper with overflow: hidden and scale the image up a little so the soft edge is cropped away.

Animating filters

Filters are animatable, so hover transitions like transition: filter 0.3s work well on a few images. Large blur radii on big elements, or animating many filtered elements at once, make the browser do heavy per-frame work, so test on a low-end phone before you ship a page full of them. Small, brief transitions on one element are rarely a problem.

Contrast and accessibility

A filter on an element that contains text changes the text colour too, so contrast checks on the original colours no longer apply. Filters also do not change alt text. Keep filters on decorative images, and do not rely on colour alone (for instance a hue shift) to convey meaning.

filter versus backdrop-filter

The filter property affects the element and its contents. backdrop-filter affects whatever is behind the element, which is what makes frosted-glass panels. If you want that look, use the Glassmorphism Generator instead of this tool; it produces the matching backdrop-filter CSS.

Quick answers

Can I save the filtered image as a file? No. The tool produces CSS only; it does not export a new image, and the preview image is the page's own copy.

Does the filter work on any element? Yes: images, videos, divs, text and iframes. The generator's demo applies it to an image or a graphic, but the line works anywhere.

Is the image uploaded to a server? No. The page reads the file in your browser to show the preview. The only network call in the tool's code is the optional feedback form.

What is the neutral value for each slider? 0 for blur, grayscale, sepia, hue-rotate and invert; 100% for brightness, contrast and saturate.