How to Use CSS Filters

2 min read by Mohammad Shoeb

How to Use CSS Filters

CSS filters let you adjust images and elements with visual effects in pure CSS, no image editor required. The filter property applies graphical operations like blur, color shifts, and shadows directly in the browser, and they update live whenever the page re-renders. Here is how each function works, how to combine them, and where to watch performance.

The filter functions

The filter property takes one or more functions. The common ones:

  • blur(5px): gaussian blur, measured in pixels.
  • brightness(1.2): 1 is normal, below 1 darkens, above 1 brightens.
  • contrast(1.5): 1 is normal, 0 is flat gray.
  • grayscale(1): 0 to 1, where 1 is fully desaturated.
  • sepia(0.8): 0 to 1, warm vintage tone.
  • saturate(2): 1 is normal, 0 strips color, above 1 boosts it.
  • hue-rotate(90deg): rotates colors around the wheel in degrees.
  • invert(1): 0 to 1, flips colors like a photo negative.
  • opacity(0.5): 0 to 1, like the opacity property but filter-friendly.
  • drop-shadow(2px 4px 6px black): a shadow that follows the shape, not the box.

Chaining filters (order matters)

You can list several functions in one declaration, separated by spaces, and they apply left to right:

.photo {
  filter: grayscale(1) contrast(1.4) brightness(1.1);
}

Order changes the result. Running brightness() before contrast() produces different pixels than the reverse, because each function operates on the output of the one before it. If a stacked effect looks wrong, try reordering before tweaking values. The CSS Filter Generator lets you stack functions with sliders and shows the exact declaration as you go.

drop-shadow() vs box-shadow

These look similar but behave differently. box-shadow always traces the rectangular border box. filter: drop-shadow() respects the actual alpha channel, so it follows the visible shape of a transparent PNG, an SVG icon, or rounded and irregular graphics. For a logo with transparency, drop-shadow() hugs the artwork while box-shadow would draw a rectangle around it. Syntax is close, but drop-shadow() does not accept inset or a spread radius.

backdrop-filter for frosted glass

While filter affects the element itself, backdrop-filter affects whatever sits behind it. This is how you build frosted-glass (glassmorphism) panels:

.glass {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px) saturate(1.5);
}

The semi-transparent background plus a blurred backdrop creates the soft, see-through look. Pair it with -webkit-backdrop-filter for the widest support.

Build it visually, then check performance

  1. Open the CSS Filter Generator.
  2. Add the filter functions you want and drag the sliders to taste.
  3. Reorder them to test how the stacking order changes the look.
  4. Copy the generated filter declaration into your stylesheet.

On performance: blur() and drop-shadow() are the heaviest, especially on large elements or backdrop-filter over scrolling content. Filters run on the GPU and can spike repaint cost, so avoid animating them on big areas and prefer transform and opacity for smooth motion. Test on a mid-range phone if filters cover much of the viewport.

Stack a few functions, mind the order, and ship effects without ever opening Photoshop.

DesignCSSHow-to

← All posts