Filters & Blend Modes

Apply Photoshop-style effects, glassmorphism, and color blending natively in the browser.

CSS6 min readConcept 33 of 43

What are visual effects in CSS?

Modern CSS provides direct access to graphical pixel manipulation that used to require heavy image editing software.

The filter property applies effects directly to an element (like blurring an image or shifting its colors). The backdrop-filter property applies those exact same effects to whatever sits *behind* the element.

Why use CSS instead of images?

Applying effects via CSS is vastly superior to exporting pre-filtered images. It keeps your file sizes small, allows effects to change dynamically on hover, and lets you animate the intensity of the filter.

Most importantly, backdrop-filter allows you to create dynamic frosted glass (glassmorphism) that blurs moving content as you scroll past it, which is impossible to do with static images.

How do you apply them?

You declare the property and chain functions together. For example: filter: blur(4px) grayscale(100%);.

For mix-blend-mode, you declare how the element should mathematically merge with its background. For example, mix-blend-mode: multiply; will make the colors combine and get darker, while screen will make them brighter.

Try it

Adjust the sliders to apply filters directly to the image, or toggle the Glass Overlay to see how backdrop-filter affects the content behind it.

Visual Effects Configurator

Blur

0px

Sepia

0%

Hue Rotate

0°

Blend Mode (Foreground Shape)

// 1. Direct Element Filter
.base-pattern {
filter:
none;
}
// 2. Frosted Glass Overlay
.glass-card {
background: rgba(255, 255, 255, 0.2);
backdrop-filter:
blur(12px)
brightness(110%);
}
// 3. Pixel Blending
.blend-shape {
mix-blend-mode: overlay;
}

Glass UI

This card blurs everything positioned directly behind it.

Check yourself

Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.

  1. 1What is the core difference between filter and backdrop-filter?
  2. 2Why might backdrop-filter appear to do absolutely nothing?
  3. 3Why is filter: drop-shadow() often better than box-shadow for transparent PNGs?

Remember this

  • Chain multiple filters together: filter: brightness(1.2) contrast(1.5).
  • backdrop-filter requires a partially transparent background color to be visible.
  • Use drop-shadow() instead of box-shadow for PNGs with transparent cut-outs.
  • mix-blend-mode controls how foreground pixels combine mathematically with background pixels.

Done with this concept?

Mark it complete to track your progress. No login needed.