HTML and CSS Effects & Filters
HTML & CSS: Effects & Filters
Enhance interfaces with shadows, blending, and filter effects while keeping accessibility and performance in mind.
Use these sparingly to guide focus and add depth.
Box and text shadows
box-shadow: offset-x offset-y blur spread color;- Stack multiple shadows for realistic depth.
text-shadowadds glow or embossed effects.
Note: Offset values move the shadow right/left and up/down; positive numbers go right/down, negative numbers go left/up.
If you want to read more about CSS Shadows or get an in-depth understanding, go to CSS Shadows in our CSS tutorial.
Backdrop filters
backdrop-filterapplies blur or saturation to the background of translucent elements.- Common processors:
blur(),brightness(),saturate(). - Requires semi-transparent background or
background-color: rgba(...).
Note: Backdrop filters affect what is behind the element, not the element itself.
Blend modes
mix-blend-modeblends the element with the backdrop.background-blend-modeblends multiple background layers.- Use for overlays, duotones, or creative masks.
Filters
filter: blur(12px) contrast(120%);stacks effects.- Hardware-accelerated but can be expensive on large surfaces-apply judiciously.
- Respect accessibility-blurred text can affect readability.
Note: Combine filters carefully; too much blur or contrast can make text difficult to read.
Example: Frosted Glass Card
This example layers a translucent card over a gradient background and uses backdrop-filter to blur and saturate whatever sits behind it.
Blur & blend
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" type="text/css">
</head>
<body>
<article class="card">
<h2>Product Release</h2>
<p>New dashboard layouts, improved collaboration tools, and expanded theme controls.</p>
</article>
</body>
</html>
body {
min-height: 100vh;
margin: 0;
display: grid;
place-items: center;
background: linear-gradient(135deg, #3730a3, #2563eb);
font-family: "Inter", sans-serif;
}
.card {
width: min(380px, 90vw);
padding: 32px;
border-radius: 28px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
backdrop-filter: blur(16px) saturate(120%);
box-shadow: 0 24px 48px rgba(15, 23, 42, 0.35);
color: #fff;
}
.card h2 {
margin: 0 0 12px;
}
Performance & accessibility
- Avoid heavy filters on large background videos or images to keep frame rates high.
- Provide solid-color fallbacks when blend modes are unsupported.
- Ensure text remains legible with sufficient contrast after applying effects.
