CSS Filters Cheatsheet: Interactive Visual Guide

October 28, 2026  |  Cheatsheet  |  CSS

By Syed · Frontend Engineer & Creator of UITweak

The CSS filter property changes how an element looks without touching the source image. One line can blur a photo, drain its color to gray, rotate every hue, or drop a shadow that follows a transparent shape. The functions below are the whole vocabulary, and every one of them is worth knowing by value range, not just by name, because the same function behaves very differently at 0, at 1, and past 1.

Interactive filter playground

Move the sliders and watch the panel change. The CSS updates as you drag, and only the functions you actually changed appear in the output, so what you copy is clean.

filter: none;

Notice what happens when you push brightness past 100 percent or saturate past 100 percent: the effect keeps going. Most filter functions accept values above their normal point, and that is where the vivid, washed-out, or blown-out looks come from.

Every filter function, with its value range

filter accepts one function or several, separated by spaces. Each function below lists its input type, because the most common mistake is passing the wrong unit: blur takes a length, never a percentage, while most others take a number or a percentage.

blur(length). Applies a Gaussian blur. The value is a length in pixels, and larger values mean more blur. Percentages are not accepted, and negative values are not allowed. A blur of zero means no effect.

img {
  filter: blur(5px);
}

brightness(number or percentage). A value of 0 percent makes the element fully black, 100 percent leaves it unchanged, and values above 100 percent make it brighter. Negative values are not allowed.

img {
  filter: brightness(150%);
}

contrast(number or percentage). A value of 0 percent makes the element fully gray, 100 percent leaves it unchanged, and values above 100 percent increase the difference between light and dark areas. Negative values are not allowed.

img {
  filter: contrast(200%);
}

grayscale(number or percentage). A value of 0 keeps full color, and 1 or 100 percent converts the element fully to shades of gray. Values in between give a partial fade toward gray, which is useful for hover effects that restore color.

img {
  filter: grayscale(100%);
}

hue-rotate(angle). Rotates every color around the color wheel by the given angle in degrees. A full turn is 360 degrees, so 180 degrees roughly inverts the hue family while keeping brightness intact.

img {
  filter: hue-rotate(90deg);
}

invert(number or percentage). A value of 0 leaves colors unchanged, and 1 or 100 percent fully inverts them, turning light to dark and swapping hues. A value of 0.5 produces a mid-gray result on most images.

img {
  filter: invert(100%);
}

opacity(number or percentage). A value of 0 makes the element fully transparent, and 1 or 100 percent leaves it opaque. It looks like the opacity property, but it composites differently, which means it can be animated alongside the other filter functions in a single transition.

img {
  filter: opacity(50%);
}

saturate(number or percentage). A value of 0 gives full gray, 1 or 100 percent leaves colors unchanged, and values above 1 make colors more vivid. This is the function to reach for when a photo looks washed out.

img {
  filter: saturate(150%);
}

sepia(number or percentage). A value of 0 leaves colors unchanged, and 1 or 100 percent gives the full warm brownish tone of an old photograph. Partial values give a subtle warm cast without losing the original colors entirely.

img {
  filter: sepia(100%);
}

drop-shadow(offset-x, offset-y, blur-radius, color). Adds a shadow that follows the shape of the element, including transparent areas. That is the key difference from box-shadow, which always follows the rectangular box. For a transparent PNG logo or icon, drop-shadow is the correct choice, because a box shadow would draw a rectangle around empty pixels.

img {
  filter: drop-shadow(4px 4px 10px rgba(0, 0, 0, 0.5));
}

Chaining filters, and why order matters

You can chain several functions in one declaration, separated by spaces, and they apply from left to right. Order changes the result, because each function works on the output of the previous one. The classic example: sepia followed by grayscale gives a fully gray image, because the grayscale step drains whatever color the sepia step added. Reverse them and you still end gray, since grayscale is the last step either way. The practical rule is to put the color-shaping functions first and the final tone adjustment last.

/* Warm, then slightly brighter and more vivid */
img {
  filter: sepia(40%) contrast(110%) brightness(105%);
}

/* Order matters: grayscale last wins over sepia */
img {
  filter: sepia(100%) grayscale(100%);
}

One more chaining rule: filter: none removes every function at once. There is no way to switch off a single function in the middle of a chain, so when you animate filters, animate the whole declaration between two complete states.

filter vs backdrop-filter

filter changes the element itself. backdrop-filter changes only the area behind the element, which is what makes frosted glass possible: the panel stays sharp while everything behind it blurs. Both properties accept the same functions, but backdrop-filter has one extra requirement: the element itself must be semi-transparent, otherwise there is nothing to see through and the blur is invisible.

For older Safari versions, include the -webkit-backdrop-filter line next to the standard one. It is harmless in browsers that do not need it, and it keeps the effect working where the prefix is still required.

background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(12px) saturate(150%);
-webkit-backdrop-filter: blur(12px) saturate(150%);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 16px;

The demo above is the full glass recipe: a translucent white background, a backdrop blur, a saturate boost so colors behind the panel stay lively, and a faint light border that sells the edge of the glass. Change the sliders and the CSS below the demo updates with it.

Tailwind filter utilities

Tailwind ships a utility for nearly every function on this page, so you rarely need raw CSS. The scale follows the same value logic: blur goes from blur-sm to blur-3xl, brightness and contrast use steps like brightness-150 and contrast-125, and grayscale, invert, and sepia are single classes. For the backdrop versions, add the backdrop prefix: backdrop-blur-md, backdrop-saturate-150, backdrop-brightness-75. Combine them freely, since Tailwind composes the functions into one filter declaration.

<!-- Grayscale image that colors on hover -->
<img src="photo.jpg" class="grayscale hover:grayscale-0 transition" />

<!-- Glass card -->
<div class="bg-white/25 backdrop-blur-md backdrop-saturate-150 border border-white/30 rounded-2xl">
  Card content
</div>

<!-- Drop shadow that follows a transparent logo -->
<img src="logo.png" class="drop-shadow-lg" />

Common recipes

Grayscale to color on hover. Start with grayscale(100%) and remove it on hover with a transition on the filter property. It reads as a quiet gallery that wakes up on interaction, and it costs one class in Tailwind.

Dark mode image dimming. Photos that look fine on a light page can glare on a dark one. A small brightness(85%) inside a dark mode media query tames them without editing a single image file.

Transparent logo shadow. Use drop-shadow() instead of box-shadow for any PNG with transparency, so the shadow hugs the logo shape instead of drawing a box around empty space.

Vintage photo. Chain sepia(60%) with a slight contrast(90%) and brightness(105%). The sepia warms the tone, the lower contrast softens it, and the brightness lift keeps it from turning muddy.

/* Grayscale to color on hover */
.gallery img {
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}
.gallery img:hover {
  filter: grayscale(0%);
}

/* Dark mode image dimming */
@media (prefers-color-scheme: dark) {
  article img {
    filter: brightness(85%);
  }
}

Performance and accessibility notes

Filters run on the GPU in most browsers, but they are not free. Blur and drop-shadow cost more than grayscale or sepia, and animating a filter across a large area can drop frames on low-end devices. Keep animated filters small, prefer transform and opacity for motion, and reserve filter animation for hover states and short transitions.

Two accessibility checks belong in every filter recipe. First, re-check text contrast after applying a filter, because a filter that dims or inverts a background can push text below a readable ratio. Second, respect reduced motion: when a filter animates, switch it off for users who asked for less motion.

@media (prefers-reduced-motion: reduce) {
  .gallery img {
    transition: none;
    filter: none;
  }
}

One last gotcha: a filtered element creates a containing block for fixed and absolutely positioned descendants, the same way a transform does. If a dropdown or tooltip suddenly positions itself against the wrong ancestor, a filter on that ancestor is the first thing to check.