Filters Blendmodes

The CSS filter property applies graphic effects like blur() , brightness() , and grayscale() to an element, while mix-blend-mode controls how its colours blend with the layers beneath — together giving you Photoshop-style effects in pure CSS.

Part of the free HTML & CSS course at LearnCodingFast — hands-on lessons with examples you run in your browser, plus practice exercises and a quick quiz.

By the end of this lesson you'll be able to retouch images with pure CSS, build frosted-glass cards, tint photos with blend modes, and combine these into Instagram-style presets and Spotify-style duotones — no Photoshop, no image editing, just a few lines of CSS.

What You'll Learn

💡 Think of It Like This

Filters are the Instagram editing screen for a single photo. Slide "blur" up and the photo softens; slide "brightness" up and it glows. You're processing the picture itself, and you can stack several adjustments at once.

Blend modes are sheets of coloured acetate you lay over the photo — the colour mixes with what's underneath instead of just sitting on top. And backdrop-filter is frosted bathroom glass : the glass itself is clear, but everything behind it turns soft and dreamy. Same idea — three different things to blur: the element, the colours that meet it, or the world behind it.

1. The filter Property

The filter property applies graphical effects to an element — the same kinds of adjustments you'd reach for in a photo editor, but in CSS. It works on anything: images, text, a < div > , even a video. You give it one or more filter functions , and they run left to right like a pipeline.

Function

Typical range

Effect

blur(px)

0 and up

Softens with a Gaussian blur

brightness(n)

0 to ∞ (1 = normal)

Lightens or darkens

contrast(n)

Increases or flattens contrast

grayscale(%)

0% to 100%

Removes colour

hue-rotate(deg)

0deg to 360deg

Spins every colour round the wheel

drop-shadow(...)

x y blur colour

Shadow that follows the shape, not the box

Run the worked example. Each card applies one filter, and hovering removes it so you can compare against the untouched image. Read the comment beside every rule to see what value produces what.

2. Chaining Filters (and why order matters)

You can list several filter functions in one declaration, separated by spaces: filter: grayscale(40%) brightness(1.2) contrast(0.9); . That single line is how the "vintage", "dramatic", and "faded" looks of photo apps are built — a fixed recipe of small adjustments stacked together.

The functions run left to right , so order changes the result. brightness(1.5) blur(5px) brightens the sharp image first, then blurs the bright pixels; swap them and you blur first, then brighten the soft pixels — a different look. Treat the order as part of the effect.

3. backdrop-filter — Frosted Glass

backdrop-filter blurs (or brightens, etc.) whatever is rendered behind an element, while the element's own content stays sharp. This is the "glassmorphism" look: a translucent card floating over a photo, with the photo blurred where it shows through.

Two things are required, and both are common stumbling blocks. First, the element needs a semi-transparent background like rgba(255,255,255,0.15) — a fully opaque background hides the blur completely. Second, Safari needs the -webkit-backdrop-filter prefix as well, so always write both.

4. Blend Modes — mix-blend-mode & background-blend-mode

A blend mode decides how the colours of two layers combine instead of one simply covering the other. mix-blend-mode blends an element with whatever sits behind it on the page — drop a coloured < div > over a photo with mix-blend-mode: multiply and the colour soaks into the photo.

background-blend-mode is the inward-looking cousin: it blends an element's own background layers together — say a background-image with a background-color — without touching anything else on the page. Worth knowing the names: multiply darkens (and makes white vanish), screen lightens, overlay boosts contrast, and color keeps the photo's brightness but takes the overlay's hue — perfect for tinting.

🎯 Your Turn #1 — Grayscale-on-rest, colour-on-hover

A classic portfolio effect: thumbnails are black-and-white until you hover, when they bloom into colour. Fill in the blanks marked ___ , then run it and check the expected result in the comments.

🎯 Your Turn #2 — Build a frosted-glass card

The card below sits over a photo but currently looks flat — the glass effect is missing. Add the semi-transparent background and the backdrop-filter (with its Safari prefix) to frost the photo behind it. Verify the expected look in the comments.

🧩 Mini-Challenge — Duotone effect from scratch

Support is faded now — only an outline is given. Build the Spotify-style duotone: a greyscaled photo with a coloured gradient blended on top in color mode. Lean on the worked examples in sections 1 and 4 if you get stuck.

⚠️ Common Errors (and the fix)

• backdrop-filter shows no blur. The element's background is opaque, so there's no see-through area for the blurred backdrop to appear in. Fix: use a semi-transparent background like rgba(255,255,255,0.15) .
• Works in Chrome, blank glass in Safari. Safari needs the prefixed property. Fix: add -webkit-backdrop-filter alongside the unprefixed backdrop-filter , with the same value.
• Filters chained in the wrong order. blur(5px) brightness(1.5) and brightness(1.5) blur(5px) look different because functions run left to right. Fix: decide the order deliberately and test both.
• multiply makes white disappear. That's by design — anything multiplied by white is unchanged, so light areas drop out. Fix: if you need light areas to survive, use screen or lighten instead.
• z-index suddenly behaves oddly after adding a filter. Any filter value creates a new stacking context, which can re-order layers. Fix: account for the new context, or move the filter to a child that doesn't need to escape it.
• The page janks on mobile. A large backdrop-filter: blur() is GPU-heavy. Fix: keep blurred backdrops to small regions (cards, navbars) and avoid animating big blurs.

📋 Quick Reference

Goal

Use this

Blur an element

filter: blur(4px);

Black & white

filter: grayscale(100%);

Lighten / darken

filter: brightness(1.3);

Shift colours

filter: hue-rotate(90deg);

Shape-following shadow

filter: drop-shadow(2px 2px 4px #000);

Chain several filters

filter: grayscale(40%) contrast(1.2);

Frosted glass

backdrop-filter: blur(14px); (+ webkit)

Tint a photo with an overlay

mix-blend-mode: multiply;

Blend an element's own layers

background-blend-mode: multiply;

❓ Frequently Asked Questions

🎉 Lesson Complete

You can now retouch images and build rich visual effects with pure CSS. The essentials:

• ✅ filter processes the element itself — blur, brightness, contrast, grayscale, hue-rotate, drop-shadow
• ✅ Chain filters in one declaration; they run left to right , so order changes the look
• ✅ backdrop-filter frosts what's behind a semi-transparent element (remember the -webkit- prefix)
• ✅ mix-blend-mode blends an element with the page; background-blend-mode blends its own layers
• ✅ Duotone = grayscale photo + a gradient blended in color mode
• ✅ Keep big blurs small and remember filters create a new stacking context

Next up: CSS Architecture , where you'll learn to organise and scale stylesheets so a large codebase stays maintainable.

Practice quiz

Continue this course

• Previous: Shapes & Clip-Path
• Next: CSS Architecture

Related lessons

• CSS Positioning