CSS Filter Generator Online – Blur, Grayscale, Sepia & More

How to use the CSS Filter Generator

Pick a preset (None, Vintage, B&W, Vivid or Cool) or start from the neutral defaults.

Move the sliders for Blur, Brightness, Contrast, Grayscale, Hue rotate, Invert, Opacity, Saturate and Sepia, or type exact values in the number boxes.

Tick Drop shadow and choose a Shadow colour if you want a shadow that follows the image shape.

Compare the Original and Filtered images in the live preview.

Copy or download the CSS and HTML tabs, or use Download HTML demo to test the effect on its own page.

A CSS filter generator with a before/after preview

This CSS filter generator lets you combine the built-in filter functions and see the result next to the untouched original. Each slider maps to one function: blur(), brightness(), contrast(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), sepia() and an optional drop-shadow(). The output is a single declaration you can apply to images, videos, icons, text or any other element.

Only settings that differ from their neutral value are written out. Leave everything at the defaults and you get filter: none; change two sliders and you get two functions, not nine. That keeps the CSS short and makes it obvious which adjustments are active.

Example: the Vintage preset

The Vintage preset raises brightness slightly, lowers contrast and saturation and adds sepia. The CSS tab shows:

.filtered {
  filter: brightness(110%) contrast(90%) saturate(80%) sepia(45%);
}

The HTML tab gives a matching <img class="filtered" src="photo.jpg" alt=""> placeholder. The B&W preset with the drop shadow switched on produces:

filter: contrast(120%) grayscale(100%) drop-shadow(4px 6px 8px rgba(0, 0, 0, 0.5));

Options explained

Control	Range	Neutral	What it does
Blur	0–20px	0	Gaussian blur; the value is the standard deviation, not a radius.
Brightness	0–200%	100%	Multiplies color channels; 0% is black.
Contrast	0–200%	100%	0% is flat gray; above 100% pushes tones apart.
Grayscale	0–100%	0%	Removes color; 100% is fully monochrome.
Hue rotate	0–360°	0°	Rotates every hue around the color wheel; 180° roughly swaps blues and oranges.
Invert	0–100%	0%	100% produces a negative; 50% is uniform gray.
Opacity	0–100%	100%	Same visual effect as the `opacity` property.
Saturate	0–300%	100%	0% is gray, values above 100% make colors more intense.
Sepia	0–100%	0%	Warm brown tint typical of old photographs.

The Drop shadow checkbox adds drop-shadow(4px 6px 8px …) in the chosen Shadow colour at 50% opacity. Edit the offsets in the copied CSS if you need a different position.

Order matters

CSS applies filter functions one after another, left to right, and each works on the output of the previous one. grayscale(100%) sepia(60%) gives a brown-toned photo, while sepia(60%) grayscale(100%) ends up plain gray because the grayscale step removes the tint. The generator always writes functions in the same order as the sliders (blur first, sepia last, drop-shadow at the end). If you want a different sequence, reorder the functions in the copied line.

drop-shadow() vs box-shadow

box-shadow draws a shadow around the element's rectangular box. filter: drop-shadow() follows the actual alpha channel, so a transparent PNG, an SVG icon or text gets a shadow shaped like its visible pixels. The trade-off: drop-shadow() has no spread value and no inset keyword. For card and panel shadows, the CSS box shadow generator is the better tool.

Tips and common problems

Blur bleeds past the edges. A blurred image fades into its surroundings. Wrap it in a container with overflow: hidden to keep a crisp edge.
Fixed elements move. Any filter other than none makes the element a containing block for descendants with position: fixed, so a fixed header inside a filtered wrapper scrolls with the wrapper. Apply the filter to a sibling or to the image only.
Frosted glass needs backdrop-filter. filter changes the element itself; backdrop-filter changes what is behind it. Use the glassmorphism generator for that effect.
Hover effects. Filters animate smoothly, so img { filter: grayscale(100%); transition: filter 0.3s; } img:hover { filter: none; } is a simple way to reveal color on hover. For the smoothest transition, list the same functions in both states.
Large blurs cost performance. Big blur radii on large or animated elements can drop frames on low-end phones. Test on a real device before shipping.

If you are adjusting colors for accessibility rather than style, check the result in the color blindness simulator as well.

Privacy

The preview uses a built-in sample illustration and all CSS is generated in your browser. No images or settings are uploaded.

Frequently asked questions

Can I apply more than one CSS filter at once?

Yes. List the functions separated by spaces in a single filter declaration, for example filter: contrast(120%) grayscale(100%). Writing two separate filter declarations does not combine them; the second one replaces the first.

Is filter: opacity() the same as the opacity property?

Visually they give the same result. The difference is that opacity() can be placed anywhere in a filter chain, and some browsers can hardware-accelerate either one. Use the plain opacity property when fading is the only effect you need.

Do CSS filters work on video and iframes?

Yes. Filters apply to the rendered pixels of any element, including <video>, <canvas> and <iframe>. They are applied every frame, so heavy blurs on video can be expensive.

How do I turn an icon to a specific color with filters?

You can approximate it by chaining brightness(0) to make the icon black and then invert(), sepia(), saturate() and hue-rotate() to reach a hue, but matching an exact hex color is fiddly. For SVG icons it is simpler to set fill: currentColor and change the color property.

Does a CSS filter change the image file?

No. The filter is applied only when the browser paints the page. The original file on the server stays untouched, and users who download or copy the image get the unfiltered version.

CSS Filter Generator