CSS Filter Generator

Your image gallery needs a hover effect — desaturate images by default, full color on hover. You know filter: grayscale(100%) does it, but combining it with a brightness boost and subtle contrast adjustment means tuning three filter values that interact with each other (brightness before contrast gives a different result than contrast before brightness). And you can’t preview it without loading an actual image.

Why This Tool (Not Tweaking Values in DevTools)

Chrome DevTools doesn’t have a visual filter editor — you type filter: blur(5px) brightness(110%) and refresh. This tool gives you sliders for all 10 CSS filter functions (blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia, drop-shadow) with a live preview on a sample image, automatic filter ordering, and one-click CSS copy. It also shows backdrop-filter vs filter differences so you pick the right property. Everything runs in your browser; no images or data are sent anywhere.

What Are CSS Filters?

The CSS filter property applies graphical effects to an element — think Photoshop layer effects, but defined in CSS and rendered live by the browser. Filters work on any HTML element: images, videos, divs, text, SVGs, and more.

Filters are composited in the order they are declared. Applying brightness(150%) before contrast(120%) produces a different result than the reverse, because each function transforms the output of the previous one.

/* Single filter */
img { filter: grayscale(100%); }

/* Multiple filters composed left-to-right */
img { filter: brightness(110%) contrast(120%) saturate(130%); }

CSS Filter Functions Reference

blur(radius)

blur(8px) applies a Gaussian blur. The radius is in px (or em, rem). A value of 0 disables blur. Higher values produce a more diffuse, out-of-focus effect.

Typical use: frosted-glass UI, background blur behind modals, image loading placeholders.

brightness(amount)

brightness(150%) scales luminosity. 100% is identity; below 100% darkens; above 100% brightens. A value of 0% renders the element completely black.

Typical use: hover effects on buttons or cards, darken overlays on hero images.

contrast(amount)

contrast(120%) adjusts the difference between light and dark tones. 100% is identity; higher values increase contrast (punchier); values below 100% reduce contrast toward flat gray.

Typical use: improve readability of overlaid text, dramatic photo effects.

grayscale(amount)

grayscale(100%) fully desaturates all colors. 0% is identity (full color). Intermediate values produce a partial black-and-white effect.

Typical use: disabled states for UI elements, monochrome image galleries, print-style views.

hue-rotate(angle)

hue-rotate(180deg) rotates every pixel’s hue around the color wheel by the given angle (0–360deg). 0deg is identity. Shifting by 180deg inverts the hues (reds become cyans, blues become yellows).

Typical use: theme color shifts, creative color grading, generating color variants from a single asset.

invert(amount)

invert(100%) produces a photographic negative: dark areas become bright and vice versa. Colors are also inverted. 0% is identity.

Typical use: dark-mode image inversion, creative effects, accessibility overrides.

opacity(amount)

opacity(50%) makes the element 50% transparent. 100% is fully opaque (identity); 0% is fully transparent. Unlike the opacity CSS property, filter: opacity() is GPU-accelerated and composited differently in some rendering engines.

Note: For simple transparency, the standalone opacity property is more widely supported and performs identically in modern browsers. The filter function version is most useful when composing with other filters.

saturate(amount)

saturate(200%) doubles color intensity. 100% is identity; 0% is fully grayscale; values above 100% produce vivid, over-saturated colors.

Typical use: vibrant image effects, hover highlights, color-graded photo galleries.

sepia(amount)

sepia(100%) converts the element to a warm brownish-yellow tone resembling aged photographs. 0% is identity.

Typical use: vintage photo filters, “aged document” effects, warm-tone image galleries.

drop-shadow(x y blur color)

drop-shadow(4px 4px 8px #000) projects a shadow that follows the actual shape of the element — including non-rectangular elements like PNGs with transparency. This is distinct from box-shadow, which only follows the rectangular bounding box.

/* Shadow follows transparent PNG outline */
img.logo { filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.4)); }

Typical use: icon shadows, transparent PNG logos, floating UI elements.

Filter Order Matters — A Visual Proof

CSS filters are applied left to right, and the order changes the result. Here is a concrete example:

/* Order A: brighten first, then increase contrast */
.photo-a { filter: brightness(150%) contrast(130%); }

/* Order B: contrast first, then brighten */
.photo-b { filter: contrast(130%) brightness(150%); }

Order A brightens the entire image first (including shadows), then stretches the tonal range — producing a washed-out, high-key look. Order B increases contrast first (deepening shadows and brightening highlights), then scales everything brighter — producing a punchy, blown-out look with crushed blacks.

Rule of thumb: Apply corrective filters (brightness, contrast) before creative filters (sepia, hue-rotate) for predictable results. Apply creative filters first only when you want the correction to modify the creative effect.

Real-World CSS Filter Recipes

Frosted Glass Card

.glass-card {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

Vintage Photo

.vintage {
  filter: sepia(40%) contrast(110%) brightness(90%) saturate(85%);
}

Dark Mode Image Fix

Images designed for light backgrounds look washed out in dark mode. This filter reduces brightness and slightly increases contrast:

@media (prefers-color-scheme: dark) {
  img:not([src$=".svg"]) {
    filter: brightness(85%) contrast(105%);
  }
}

Disabled Button

button:disabled {
  filter: grayscale(80%) opacity(60%);
  cursor: not-allowed;
}

Loading Skeleton Pulse

.skeleton {
  filter: blur(4px) brightness(95%);
  animation: skeleton-pulse 1.5s ease-in-out infinite alternate;
}
@keyframes skeleton-pulse {
  to { filter: blur(4px) brightness(105%); }
}

How to Combine CSS Filters

Multiple filter functions are combined in a single filter declaration, separated by spaces. They are applied left to right — order matters.

/* Vintage film effect */
.photo {
  filter: sepia(40%) contrast(115%) brightness(95%) saturate(90%);
}

/* Noir / black-and-white high-contrast */
.noir {
  filter: grayscale(100%) contrast(130%) brightness(85%);
}

/* Frosted glass with shadow */
.glass-card {
  backdrop-filter: blur(12px);
  filter: drop-shadow(0 4px 24px rgba(0,0,0,0.2));
}

CSS filter vs backdrop-filter

Use backdrop-filter: blur() for frosted-glass effects where the element is semi-transparent and you want to blur the background. Use filter: blur() to blur the element itself.

Browser Support

CSS filters have 97%+ global support and require no vendor prefixes. The only notable exception is Internet Explorer, which does not support CSS filters at all.

Performance Considerations

Filters trigger compositing in the browser’s render pipeline. Keep these guidelines in mind:

• Prefer GPU-accelerated properties. Filters like blur(), opacity(), and brightness() are hardware-accelerated in modern browsers.
• Avoid animating blur() on large elements — it is expensive. Prefer backdrop-filter with a fixed blur on a separate layer.
• Use will-change: filter on elements where filter is animated, to promote the element to its own compositing layer.
• Test on mobile. GPU resources are limited on mobile devices; heavy blur effects can drop frame rates.

Frequently Asked Questions

Can I animate CSS filters? Yes. Use CSS transition or @keyframes to animate filter values. For example: transition: filter 0.3s ease. Most filter functions animate smoothly between values.

Does filter: opacity() behave differently from the opacity property? They produce the same visual result, but the filter version creates a new stacking context and may be composited differently by the browser’s GPU pipeline. For simple transparency, use the standalone opacity property.

Why does drop-shadow follow the shape of a PNG but box-shadow does not? box-shadow is defined by the CSS box model and always uses the element’s rectangular border box. drop-shadow() is a filter that analyzes the actual rendered pixels — including transparent areas — so it traces the visual outline of non-rectangular content like icons or cutout images.

What is the difference between grayscale(100%) and saturate(0%)? Both produce a fully desaturated image but they use different algorithms. grayscale(100%) uses a perceptually-weighted conversion (similar to the ITU-R BT.601 luminance formula); saturate(0%) reduces saturation linearly. Results look similar but are not identical, especially for very bright or very dark colors.

Can I apply a CSS filter to a video element? Yes. filter works on <video> elements. The filter updates each frame in real time — useful for building creative video effects entirely in CSS and JavaScript without a canvas.