CSS Image Filters: A Visual Guide to Every Filter Function

CSS filters let you apply visual effects to any element without touching the source image. A single line of CSS can convert a photo to grayscale, boost its contrast, or add a blur overlay. This guide covers every filter function with practical values and real-world use cases.

The filter Property

The filter property accepts one or more filter functions. They are applied in the order they appear:

.hero-image {
  filter: brightness(1.1) contrast(1.05) saturate(1.2);
}

This brightens the image slightly, adds a touch of contrast, and boosts color saturation. The result is a more vibrant photo without any image editing software.

Every Filter Function

blur(radius)

Applies a Gaussian blur. The radius is specified in pixels. Useful for background overlays and depth-of-field effects.

.backdrop {
  filter: blur(8px);
}

Values between 2-6 px create a subtle softness. Values above 10 px produce a frosted glass effect. Combine with backdrop-filter for blurring content behind an element.

brightness(amount)

Adjusts the brightness. A value of 1 is the original. Values below 1 darken; above 1 brighten.

.dimmed { filter: brightness(0.6); }  /* 40% darker */
.bright { filter: brightness(1.3); }  /* 30% brighter */

contrast(amount)

Increases or decreases contrast. The default is 1. Higher values make lights lighter and darks darker.

.high-contrast { filter: contrast(1.4); }
.washed-out    { filter: contrast(0.7); }

grayscale(amount)

Converts to grayscale. 0 is full color, 1 is fully desaturated. Useful for hover effects and disabled states.

.inactive {
  filter: grayscale(1);
  transition: filter 0.3s ease;
}
.inactive:hover {
  filter: grayscale(0);
}

hue-rotate(angle)

Shifts all colors around the color wheel by the specified angle in degrees.

.shifted { filter: hue-rotate(90deg); }  /* green becomes blue */

This is niche but useful for generating color variations from a single image asset.

invert(amount)

Inverts the colors. At 1, white becomes black and all hues flip. Partial inversion creates unusual tonal effects.

.dark-mode-image { filter: invert(1) hue-rotate(180deg); }

The invert(1) hue-rotate(180deg) trick roughly preserves original hues while inverting luminance. It is a quick hack for dark mode image adaptation.

opacity(amount)

Works like the opacity property but can be combined in a filter chain. Values range from 0 (transparent) to 1 (opaque).

.ghost { filter: opacity(0.5) blur(1px); }

saturate(amount)

Controls color intensity. Below 1 desaturates; above 1 increases vibrancy.

.vivid  { filter: saturate(1.5); }
.muted  { filter: saturate(0.4); }

sepia(amount)

Applies a warm, brownish tone reminiscent of old photographs. Values range from 0 to 1.

.vintage { filter: sepia(0.7) contrast(1.1); }

drop-shadow(x y blur color)

Like box-shadow but follows the element's alpha contour. Essential for transparent PNGs and SVGs.

.icon {
  filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.3));
}

Unlike box-shadow, drop-shadow wraps around the visible pixels of the image, not the bounding box.

Combining Filters for Presets

Stack filters to create Instagram-style presets with pure CSS:

/* Warm vintage preset */
.warm-vintage {
  filter: sepia(0.35) contrast(1.1) brightness(1.05) saturate(1.3);
}

/* Cool cinema preset */
.cool-cinema {
  filter: contrast(1.2) brightness(0.95) saturate(0.85) hue-rotate(10deg);
}

/* Dramatic B&W */
.dramatic-bw {
  filter: grayscale(1) contrast(1.4) brightness(1.1);
}

Performance Considerations

CSS filters are GPU-accelerated in modern browsers. However, blur() on large elements can cause frame drops, especially on mobile. Best practices:

1. Use will-change: filter on elements that animate filters.
2. Avoid blur on full-screen elements during scroll. Apply it to a fixed background instead.
3. Prefer backdrop-filter for glassmorphism effects over blurring a pseudo-element.

.glass-panel {
  backdrop-filter: blur(12px) saturate(1.5);
  background: rgba(255, 255, 255, 0.15);
}

Applying Filters with JavaScript

For dynamic filter adjustments (like a slider UI), set the filter property directly:

const image = document.querySelector(".preview");
const brightnessSlider = document.querySelector("#brightness");

brightnessSlider.addEventListener("input", (e) => {
  const value = e.target.value / 100;
  image.style.filter = `brightness(${value}) contrast(${contrastValue})`;
});

This approach updates in real time without re-rendering the image. The browser handles all pixel manipulation on the GPU.

Browser Support

All filter functions have been supported across major browsers since 2020. The only exception is backdrop-filter, which requires -webkit-backdrop-filter for older Safari versions. In 2026, you can use all of these without prefixes.

When to Use CSS Filters vs. Canvas

CSS filters are ideal for display-time effects: hover states, UI treatments, and live previews. If you need to export the filtered image as a file, use the Canvas API with equivalent operations. The Canvas approach gives you a downloadable result; CSS filters only affect what the user sees on screen.

Try our Image Filters to experiment with every CSS filter function visually — right in your browser, no upload required.