CSS Filter Generator

What does the CSS filter property do?

The filter property applies graphical effects to an element after it has been rendered — images, videos, SVG, text and whole components alike. It accepts a space-separated list of functions: blur(), brightness(), contrast(), saturate(), grayscale(), sepia(), hue-rotate(), invert(), opacity() and drop-shadow(). Amounts can be written as percentages or numbers (brightness(120%) equals brightness(1.2)).

Functions run in the order they are written, each one working on the output of the previous, so grayscale(100%) sepia(60%) gives a warm monochrome while sepia(60%) grayscale(100%) ends up plain grey. This generator only outputs functions that differ from their defaults, in a consistent order: blur, tone (brightness, contrast, saturation), color (grayscale, sepia, hue, invert), opacity, then shadow.

drop-shadow() deserves special mention: unlike box-shadow it follows the alpha channel, so a transparent PNG, SVG icon or clipped shape gets a shadow around its actual outline. The sibling property backdrop-filter takes the same functions but applies them to whatever is behind the element — the basis of frosted-glass effects.

How to use the CSS Filter Generator

1. Drag the sliders to adjust blur, brightness, contrast, saturation, grayscale, sepia, hue rotation, inversion and opacity, or start from a preset.
2. Optionally enable drop-shadow() and set its offset, blur, color and opacity. Switch to the Shape subject to see it follow the outline.
3. Load your own image to test the effect on real content — it is read locally and never uploaded.
4. Choose whether to output filter or backdrop-filter, then copy the CSS.

Example

Grayscale thumbnails that regain their color on hover:

.logo-grid img {
  filter: grayscale(100%) opacity(70%);
  transition: filter 0.3s ease;
}

.logo-grid img:hover {
  filter: none;
}

Tips and gotchas

• A filter other than none creates a new stacking context and a containing block for fixed-position descendants, just like transform.
• invert(100%) hue-rotate(180deg) is a quick dark-mode trick for diagrams and screenshots: it flips lightness while keeping hues roughly the same.
• Large blur values on big or animated elements are expensive to paint. Prefer pre-processed images for heavy, static effects.
• Transitions between two filter lists animate smoothly when both lists contain the same functions in the same order.
• For accessibility, never rely on a filter to convey meaning, and check that filtered text still meets contrast requirements.
• Frosted glass panels are easier to build with the Glassmorphism Generator; for rectangular shadows use the Box Shadow Generator.

Browser support

filter with all ten functions works unprefixed in every current browser. backdrop-filter is supported in Chrome, Edge, Firefox 103+ and Safari (prefixed as -webkit-backdrop-filter before Safari 18), which is why both lines are generated.