CSS filter generator

How to use it

1. Choose a sample similar to your task, or drop your own file directly onto the image. The same values look different on a landscape, skin, and an interface screenshot.

2. Adjust the sliders in the left column and watch the result on the right: the image and the filter string stay in view while you scroll through the settings. Start with contrast and saturation—they change the image the most. Set blur last: once it is applied, you can't see what the other controls do.

3. Turn on the comparison slider when the result seems “good enough.” About half the settings are usually unnecessary, and you can see that only when the result is next to the original.

4. Reorder the filters in the string if the result doesn't match your expectations: the browser applies them from left to right, and blur(4px) grayscale(1) is not equal to grayscale(1) blur(4px).

5. Check transparency and drop-shadow against a checkerboard. On a white background, a semitransparent image simply looks lighter, and an outline shadow simply looks blurred.

6. Copy the code with the button next to the string. Use the “Copy link” button for a link with all the values, and download the generated image below in the “Image file” section.

The formula and what it includes

• blur — Gaussian blur, radius in pixels; the neutral value is 0. Fractional values are valid: 0.5px is a usable value
• brightness — Brightness; 100% leaves the image unchanged, 0% produces a black image, and values above 100% overexpose it
• contrast — Contrast; 0% turns everything gray, while values above 100% separate light and dark areas
• drop-shadow — Shadow following the outline of opaque pixels: X and Y offsets, blur radius, and color. Unlike box-shadow, the feathering radius is half the same value
• grayscale, sepia — Desaturation and tinting; 0% leaves the image unchanged, 100% applies it completely
• hue-rotate — Rotation around the color wheel in degrees; 0deg and 360deg are equivalent
• saturate — Saturation; 0% produces the same result as grayscale(100%)
• opacity — The image's own opacity, not the background beneath it

Example breakdown: why drop-shadow comes last

The input data is the same as the default field values: you can calculate it mentally and confirm that the tool is telling the truth.

• Blur 2 px
• Grayscale 100%
• Outline shadow: 2 px right, 4 px down, 6 px radius

1. Brightness, contrast, and saturation remain at 100%, and hue remains at 0deg. These are neutral values: they change nothing and are omitted from the string.

2. Two filters plus a shadow are enabled, so they make up the rule: blur(2px) grayscale(100%) drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.45)).

3. The shadow comes last for a reason. drop-shadow builds its silhouette from what remains of the image after the preceding filters. Put it first, and the shadow will follow the sharp outline while the image itself becomes blurred: the silhouette and the subject will no longer match.

filter: blur(2px) grayscale(100%) drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.45));

Frequently asked questions

• Where does my image go?

  Nowhere. The FileReader function reads the file directly in the browser and turns it into a data: string visible only to this tab. The download is also assembled locally: the browser draws the image on a canvas with the same ctx.filter and returns the file through an in-memory URL. The page makes no network requests after loading.

• How is drop-shadow different from box-shadow?

  drop-shadow follows the outline of opaque pixels: for a PNG with a cutout subject or an SVG, the shadow follows the silhouette. box-shadow always draws the block's rectangle, including its rounded corners. The feathering also differs: with box-shadow, the blur radius is roughly twice as wide as the same value in drop-shadow, so you can't transfer values between them one for one.

• How can I recolor a black icon to a brand color with one CSS rule?

  With the sequence invert → sepia → saturate → hue-rotate → brightness → contrast. No single filter can do this, but together they can shift a black pixel to almost any color. The sequence can't be inverted analytically, so the values are found numerically—that's what the “Recolor black icon” tab does. The error is shown in thousandths of OKLab: below one unit, the difference isn't visible even up close. This technique works with monochrome graphics; for a color image, it first applies brightness(0) and recolors the entire image.

• Why does filter break position: fixed inside a block?

  Because any filter value other than none makes the element a containing block for descendants with position: fixed. That descendant is then positioned relative to the filtered ancestor instead of the viewport. transform and will-change do the same thing.

• How is filter different from backdrop-filter?

  filter processes the element itself together with its contents. backdrop-filter processes what is behind the element—that's how frosted glass is made. The values are the same, but they apply to different things. backdrop-filter also has a requirement: the element must have a at least partially transparent background. Otherwise, there is nothing to blur—a solid fill simply covers the background.

• Why isn't the filter order in Tailwind the same as the order I used?

  Tailwind builds filters not as a string, but as a set of CSS variables inserted into the filter property in a fixed order. You can arrange the classes however you want—the result won't change. If order matters, use the output in regular CSS or write the entire filter as one arbitrary value.

• Do filters slow down the page?

  Blur is the most expensive of them: the browser recalculates the element's entire area. One static blur is usually unnoticeable, but blur on a large block during an animation is almost always noticeable. backdrop-filter costs more than regular filter because the browser first composites what is behind the element. The other filters are cheaper, but each adds another rendering pass.