Developer Tools New Tool

Free Online CSS Filter Generator with Blur, Contrast and Drop Shadow

Set every CSS filter function on one page and watch the result on a sample drawn entirely in CSS, with no image fetched from anywhere. Neutral values are left out of the output, so the rule you copy contains only the functions you actually changed, in the order they are applied.

Free Forever Nothing Uploaded Ten filter functions Runs in your browser

Free Online CSS Filter Generator with Blur, Contrast and Drop Shadow

Advertisement Slot (Top Banner) Google AdSense Unit • Responsive Banner

CSS Filter Generator Everything happens in this tab. Nothing you paste is sent anywhere.

Preview

Sample

CSS

Light brightness 100% contrast 100% opacity 100%

Colour saturate 100% grayscale 0% sepia 0% hue-rotate 0deg invert 0%

Blur and shadow blur 0px drop-shadow X Y blur 4px 6px 8px

Start again

The preview is drawn in CSS. The ring in the middle is hollow, so you can see that drop-shadow follows the transparent parts while box-shadow would not.

Buy Us A Coffee

Enjoying WizTools123? Help keep our server infrastructure 100% free and open for everyone.

Buy Us A Coffee

Sponsored Content (Below Tool) Google AdSense Placement

How to Build a CSS Filter

A few steps, and nothing is uploaded.

Move the values you need Brightness, contrast, saturation, grayscale, sepia, hue rotation, invert, opacity and blur. Anything left at its neutral value is kept out of the output.

Add a drop shadow if you want one It gets its own offset, blur and colour. Unlike box-shadow it follows the shape of what it is applied to, including transparent gaps.

Read the preview The sample is drawn in CSS: flat colour chips, a gradient, a hollow ring and some text, so you can see what each function does to each of them.

Copy the rule One filter declaration, with only the functions you changed, in the order the browser will apply them.

What to Know About CSS Filters

Order, cost, and how drop-shadow differs from box-shadow.

filter: drop-shadow follows transparency; box-shadow does not. A drop shadow reads the alpha channel of what it is applied to, so it traces the visible pixels of a transparent PNG, an icon or the hollow ring in the preview. box-shadow always follows the rectangle of the border box and its corner radius, whatever is drawn inside it.

Filters are applied in the order you write them. grayscale(100%) sepia(100%) flattens the colour and then tints the grey, while sepia(100%) grayscale(100%) tints first and then throws that tint away, leaving plain grey. The order is part of the value, so keep it when you copy the rule.

A filter affects the whole element and everything inside it. Blur or dim a container and its text, borders and children go with it, because the element is rendered first and then filtered as one image. It also creates a containing block for fixed and absolute children, which can move a positioned tooltip unexpectedly.

This is filter, not backdrop-filter. The page produces no backdrop-filter value, which is the property that blurs what is behind an element for a frosted glass panel, and it cannot read an existing filter back into the sliders. It also loads no image, so what you see is a CSS drawing rather than a photograph.

Key Features & Capabilities

What this tool does, and what it deliberately does not.

Every filter function Blur, brightness, contrast, saturate, grayscale, sepia, hue-rotate, invert, opacity.

drop-shadow included Its own offset, blur and colour, following the real shape.

Sample drawn in CSS Colour chips, a gradient, a hollow ring and text. No image fetched.

Short output Neutral values are left out, so the rule holds only your changes.

Order preserved The functions come out in the order the browser applies them.

Runs in your browser Nothing is uploaded and no remote asset is loaded.

About the CSS Filter Generator

CSS filters take an element that has already been rendered and process it as an image: lightening it, draining the colour out of it, rotating its hues, blurring it, or giving it a shadow that follows its actual shape. They are a single property with a list of functions, and because they are applied after layout they can be changed or animated without the page reflowing.

This page shows all of the functions together, which is the way they are normally used. A dimmed and desaturated panel behind a modal is two functions, a disabled control is usually a grayscale and an opacity, and a hover lift on an icon is often a drop shadow on its own. Anything left at its neutral value is dropped from the output, so the rule you copy is as short as the change you actually made.

The preview deliberately fetches nothing. It is built from flat colour blocks, a gradient, a hollow ring and a line of text, all drawn in CSS, which is enough to show what each function does and keeps the page working with no network at all. The hollow ring is there for one reason: it is where the difference between filter: drop-shadow() and box-shadow becomes obvious.

Frequently Asked Questions

Order of functions, backdrop-filter, and performance.

A drop shadow is generated from the alpha channel of the rendered element, so it traces the shape you can actually see, including holes and soft edges. A box shadow follows the border box and its corner radius and nothing else. For an icon, a transparent PNG or an irregular shape, drop-shadow is the one you want; for a card, box-shadow is cheaper and has a spread value that drop-shadow lacks.

Yes. Each function receives the output of the one before it, so grayscale followed by sepia gives a sepia tone while sepia followed by grayscale gives plain grey. If you rearrange the list you will get a different picture, which is why the output keeps the order you see on screen.

Because any filter other than none makes the element a containing block for absolutely and fixed positioned descendants. A tooltip or dropdown that was positioned against the viewport is now positioned against the filtered element instead. If that matters, apply the filter to a sibling or an inner wrapper rather than the ancestor.

Not directly. Frosted glass blurs what is behind an element, which is backdrop-filter, a different property that this page does not generate. The blur here applies to the element and its own content, so using it for glass would blur the panel rather than the background.

Blur and drop-shadow are the costly ones, because they are recomputed whenever the element changes, and a blur on a large element that scrolls or animates can drop frames on a slow device. Colour-only functions such as saturate, grayscale and hue-rotate are cheap by comparison. Animating a filter is possible but is worth measuring before you rely on it.