CSS Filters

Animations wrote timelines. Transforms moved where pixels sit. Filters change how those pixels look: soft blur on a modal backdrop, grayscale thumbnails that colorize on hover, a photo bumped with brightness and contrast — still in the same layout slot.

What `filter` does

The filter property paints one or more post-process effects on an element’s rendered output (and usually its descendants as a group). Layout width, height, and flow stay the same; only the painted result changes. Set filter: none (the initial value) to clear effects.

You chain functions in one filter value, space-separated — similar spirit to chaining transform functions, but here the tools are visual, not spatial: filter: brightness(1.1) contrast(1.05) saturate(1.2);

Filter functions at a glance

📊 Common CSS filter functions

Function	Typical job
`blur(radius)`	Soften edges / frosted look (`px` or similar length)
`brightness(%)`	Lighten or darken (`1` / `100%` = unchanged)
`contrast(%)`	Push or flatten tonal range
`grayscale(%)`	Drain color (`1` = full gray)
`saturate(%)`	Boost or mute color intensity
`hue-rotate(angle)`	Shift hues around the color wheel
`opacity(%)`	Fade the filtered result (related to, but not identical with, the `opacity` property)
`sepia(%)` / `invert(%)`	Warm vintage tone / invert tones
`drop-shadow(…)`	Shadow that follows alpha shape (icons, text outlines)
`none`	Remove filters

Percentages and bare numbers often both work (grayscale(1) ≈ grayscale(100%)). Pick one style and stay consistent in a project.

Grayscale cards that wake on hover

A classic gallery pattern: muted by default, full color on hover. Pair with a short transition so the restore feels intentional — motion from earlier lessons, look from this one.

Grayscale thumbnail that restores on hover

css

.thumb {
filter: grayscale(1);
transition: filter 0.25s ease;
}

.thumb:hover,
.thumb:focus-visible {
filter: grayscale(0);
}

grayscale(0) is full color. Keep the transition on filter only when the change is small; heavy blur animations on large photos can be costly.

Soft blur for emphasis

blur() softens an element. Use a modest radius on overlays or decoys — not on the entire page body — so focus stays readable.

Blurred backdrop panel behind a modal

css

.modal-scrub {
filter: blur(6px);
transform: scale(1.02);
}

.modal-dialog {
/* keep the dialog itself sharp — no filter here */
filter: none;
}

Blurring a large ancestor also blurs its text. Prefer blurring a background layer (or use backdrop-filter below) when the foreground must stay crisp.

Brightness and contrast for photos

Product shots and hero images often need a light grade without opening an image editor.

Photo grade with brightness and contrast

css

.hero-photo {
display: block;
width: 100%;
height: auto;
filter: brightness(1.08) contrast(1.06);
}

.hero-photo.is-muted {
filter: brightness(0.85) contrast(0.95) saturate(0.8);
}

Values slightly above 1 brighten or punch contrast; values below 1 pull back. Tiny moves read as polish; huge jumps look fake.

Stack several filters

One declaration can combine tone, color, and softness. Order can matter for complex stacks — write the intended visual left-to-right and verify in the browser.

Stacked saturate, hue-rotate, and light blur

css

.sticker {
filter: saturate(1.35) hue-rotate(12deg) blur(0.3px);
}

.sticker.is-print {
filter: grayscale(0.15) contrast(1.1);
}

Start with one or two functions. Add more only when the design needs it — every extra filter is more GPU work on large surfaces.

`drop-shadow()` vs `box-shadow`

box-shadow follows the border box. drop-shadow() follows the alpha silhouette — ideal for PNGs with transparency and for icons where the shadow should hug the glyph, not a rectangle.

Icon shadow with drop-shadow filter

css

.icon-glow {
width: 2.5rem;
height: 2.5rem;
filter: drop-shadow(0 4px 6px rgba(15, 23, 42, 0.35));
}

.icon-glow:hover {
filter: drop-shadow(0 6px 10px rgba(37, 99, 235, 0.45));
}

drop-shadow() does not support inset the way box-shadow does. For recessed card elevation, stay with box-shadow from the earlier Effects lesson.

Backdrop filter — blur what is behind

backdrop-filter affects the content showing through a translucent element (frosted glass). The element needs a see-through background; otherwise there is nothing to sample.

Example idea: background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(10px); on a sticky header over a busy hero. Support is broad on modern browsers; still keep a solid fallback background if the blur is skippable.

Filter opacity vs the `opacity` property

filter: opacity(0.5) fades the filtered painting. The opacity property fades the element and creates a containing group that often affects stacking and how children composite. For “whole control including children fades together,” the dedicated opacity property is usually clearer. Use filter opacity() when it is part of a filter stack with blur or color grades.

Try it yourself

Put filter: grayscale(1) on a card image; restore with grayscale(0) on :hover and a transition: filter 0.2s ease.
Soften a background layer with blur(8px); keep the foreground text unfiltered.
Grade a photo with brightness(1.1) contrast(1.05); then dial both back toward 1 until it feels natural.
Stack saturate(1.4) hue-rotate(20deg) on a sticker; remove one function and compare.
Shadow a transparent PNG icon with drop-shadow(...); compare the same icon with box-shadow on a square box.
Optional: frosted bar with translucent background + backdrop-filter: blur(12px).

Common mistakes

Applying a strong blur() to a huge page section that includes readable text
Expecting drop-shadow() to accept inset like box-shadow
Using filter: opacity() when a simple opacity on the element would be clearer
Animating heavy filters on large images on every scroll frame without performance checks
Setting backdrop-filter on a fully opaque background — nothing behind shows, so no frost appears

Summary

filter changes how rendered pixels look; layout flow stays put
Chain blur, brightness, contrast, grayscale, saturate, and friends in one value
Prefer drop-shadow() for alpha-shaped shadows; box-shadow for box elevation
backdrop-filter frosts what shows through a translucent layer
Effects & Motion wraps here; next module is Modern Toolkit — starting with CSS Variables

🧠 Test Your Knowledge

Ready to Start

Test Your Knowledge

Challenge yourself with this interactive quiz and see how well you understand the topic

❓

Questions

🎯

70%

To Pass

♾️

∞

Time

🔄

∞

Attempts

📝 Instructions

Read each question carefully
Select the best answer for each question
You can retake the quiz as many times as you want
Your progress will be shown at the top

Language