Filters, Backdrop Filters and Blend Modes
What Is It?
Filters alter the rendered appearance of an element. A backdrop filter affects content behind a translucent element, while blend modes combine colors across layers.
Properties, Tags and Attributes Explained
filter: Applies effects such as blur(), brightness(), contrast(), grayscale(), and drop-shadow().backdrop-filter: Filters the pixels behind an element; the foreground needs transparency to reveal the effect.mix-blend-mode: Controls how an element blends with its backdrop.background-blend-mode: Controls blending among background layers.isolation: isolate confines blending to a new stacking context.
Each example is a complete HTML page. The CSS is inside the head's style element. Use Try in new tab to edit the CSS or HTML, run your changes, and reset the example.
Example 1: Filter a decoration
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Filters, Backdrop Filters and Blend Modes</title>
<style>
.demo { width: 100px; height: 100px; margin: 16px; background: linear-gradient(#2563eb, #f97316); filter: grayscale(100%) drop-shadow(4px 4px 3px #64748b); }
</style>
</head>
<body>
<div class="demo" aria-label="Grayscale decorative tile"></div>
</body>
</html>What you see: The gradient becomes grayscale and gains a shadow.
Example 2: Translucent panel
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Filters, Backdrop Filters and Blend Modes</title>
<style>
.scene { padding: 24px; background: repeating-linear-gradient(45deg, #93c5fd 0 12px, #ddd6fe 12px 24px); }
.panel { padding: 24px; background: rgb(255 255 255 / 65%); backdrop-filter: blur(6px); }
</style>
</head>
<body>
<div class="scene"><div class="panel">Readable content over a filtered backdrop</div></div>
</body>
</html>What you see: Where supported, stripes behind the translucent panel are blurred; the panel still has a readable fallback fill.
Example 3: Confine blending
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Filters, Backdrop Filters and Blend Modes</title>
<style>
.scene { isolation: isolate; background: #fde68a; padding: 24px; }
.label { background: #93c5fd; mix-blend-mode: multiply; padding: 16px; }
</style>
</head>
<body>
<div class="scene"><div class="label">Blended label</div></div>
</body>
</html>What you see: The blue label multiplies with the yellow scene inside its isolated context.
Example 4: Blend background layers
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Filters, Backdrop Filters and Blend Modes</title>
<style>
.box { height: 140px; background-color: #fde68a; background-image: linear-gradient(90deg, #93c5fd, #c4b5fd); background-blend-mode: multiply; }
</style>
</head>
<body>
<div class="box" aria-label="Blended decorative gradient"></div>
</body>
</html>What you see: The gradient multiplies with the yellow fill on the same element. Use background-blend-mode for decorative image tints; compare it with normal.
When and Where to Use It
Use filters and blending for decorative imagery and restrained glass-like panels. Test readability against every backdrop.
Common Mistake or Useful Tip
Filters can create stacking contexts and large blur areas can be costly. Avoid making text readability depend on a visual effect.
Try It Yourself
Replace grayscale(100%) with brightness(1.2) and compare the result.