Softonic

CSS Filter Generator

Step 1 / 2
Next

CSS filter applies image-processing effects, like blur, brightness, contrast and saturation, to any element, not just images. Chaining several filters and getting the units right is where mistakes happen. This generator builds the filter declaration for the five most common functions: blur, brightness, contrast, grayscale and saturate. Enter your values and copy the resulting CSS.

How to build a filter chain

  1. 1

    Enter the values

    Blur is in pixels; brightness, contrast, grayscale and saturation are percentages.

  2. 2

    Understand the scale

    Brightness and contrast at 100% mean no change; at 0% the element is black or grey. Grayscale goes from 0% (full color) to 100% (fully desaturated); saturate at 100% keeps colors as they are.

  3. 3

    Generate the CSS

    Click the button and the tool outputs the combined `filter` rule with all five functions.

  4. 4

    Copy the rule

    Copy the result and paste it into your stylesheet.

  5. 5

    Check the order

    The functions are applied from left to right. If the effect looks different from what you expected, adjust the values.

The filter functions

Function Unit Effect
blur() px Gaussian blur. 0 = no blur
brightness() % or decimal 100% = no change, 0% = black, 200% = double
contrast() % or decimal 100% = no change, 0% = grey, 200% = double
saturate() % or decimal 100% = no change, 0% = grayscale
grayscale() % or decimal 0% = no change, 100% = fully desaturated
sepia() % or decimal 0% = no change, 100% = fully sepia
hue-rotate() deg 0deg = no change. Rotates the hue wheel
invert() % or decimal 0% = no change, 100% = fully inverted
opacity() % or decimal Same as opacity property
drop-shadow() x y blur color Like box-shadow but follows opacity/clip-path

Chaining order matters

filter: brightness(0.5) saturate(2) applies brightness first, then saturation, the two filters compound.

filter: saturate(2) brightness(0.5) applies saturation first. Because the image is brighter before being darkened, the colour saturation is more pronounced.

The visual difference is subtle but real. Try both orders when a filter chain does not look how you expected.

Common recipes

/* Faded photo look */
filter: contrast(0.9) saturate(0.85) brightness(1.05);

/* Vintage / faded */
filter: sepia(0.3) contrast(1.1) brightness(0.95);

/* Duotone approximation */
filter: grayscale(1) sepia(1) hue-rotate(180deg) saturate(1.5);

/* Hero darken */
filter: brightness(0.6);

/* Disabled state */
filter: grayscale(1) opacity(0.6);

/* Glass / frosted overlay */
filter: blur(12px) saturate(1.3);

backdrop-filter for frosted glass

filter applies to the element itself; backdrop-filter applies to what is behind a semi-transparent element, the frosted-glass effect iOS popularised.

.modal-backdrop {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(20px) saturate(1.2);
}

Support: all modern browsers; Firefox finally supports it without flag in 103+.

Performance notes

  • blur() is the most expensive filter because it requires convolving every pixel with a kernel. A 30px blur on a 4K hero image costs real frames.
  • grayscale, sepia, brightness and similar are per-pixel colour transforms, cheap.
  • Filters are GPU-accelerated in modern browsers, but animating blur() still stutters on low-end devices.
  • Prefer will-change: filter before animating.

filter: drop-shadow() vs. box-shadow

  • box-shadow follows the element’s border-box (respects border-radius).
  • filter: drop-shadow() follows the element’s non-transparent pixels, which means it traces clip-path shapes, PNG transparency, and SVG paths.

For shadows on clipped or transparent images, use drop-shadow. For standard cards and boxes, box-shadow is faster.

Frequently Asked Questions

Yes, filter is applied to the element and all its descendants as a group. If you filter a parent, children are included. To filter only the parent background, put the content in a separate stacking context or use backdrop-filter.

Because blur applies to the whole element including rendered text. There is no way to blur a background while keeping text sharp via plain filter. Use backdrop-filter on a semi-transparent overlay, keeping the text outside the filtered element.

Yes, all filter functions animate. Keep an eye on blur performance on mobile, animating blur radius is noticeably costly. grayscale, sepia and brightness animate cheaply.

Yes, CSS filter applies to SVG elements the same way as any other DOM element. SVG also has its own richer <filter> element system, which is more powerful but much more verbose.

Related Tools

ASCII Table Reference

Full ASCII table from 0 to 127 with decimal, hex, octal, binary, standard names and HTML numeric-reference notation, including NUL, LF and DEL.

HEX Color Picker

Pick or enter a HEX colour and get RGB, HSL, approximate CMYK, relative luminance and contrast ratios against white and black.

Color Palette Generator

Generate monochromatic, analogous, complementary, triadic or tetradic color palettes from a base HEX color and export copy-ready CSS variables.

HTML Character Reference

Searchable list of HTML entities, their named and numeric codes, and a one-click copy for special characters and symbols.

FPS Counter

Measure browser FPS with requestAnimationFrame, smoothing, min/max frame rate, warnings and an optional graph. Runs locally with no upload or API.

JSON Formatter

Paste JSON to pretty-print with 2 or 4 spaces, minify it to compact output, or run a quick syntax check before copying the result.