Topic 31 of 62
Filters & Shadows
Overview
Box Shadows and Filters are the primary tools for establishing 'Elevation' (the illusion of depth and Z-axis layering) in modern UI design (like Google's Material Design). box-shadow paints shadows behind the rectangular CSS box. filter applies Photoshop-style math directly to the pixels (like blur, grayscale, or drop-shadow).
Syntax
css
/* 1. Box Shadow (X-offset, Y-offset, Blur, Spread, Color) */
.card {
/* A soft, modern elevation shadow */
box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
/* You can stack multiple shadows by comma-separating them! */
box-shadow:
0px 4px 6px -1px rgba(0, 0, 0, 0.1),
0px 2px 4px -2px rgba(0, 0, 0, 0.1);
}
/* 2. Filters (Applied to the actual pixels) */
img {
/* Blurs the image */
filter: blur(4px);
/* Makes the image black and white */
filter: grayscale(100%);
/* Bumps contrast and saturation */
filter: contrast(120%) saturate(150%);
}
/* 3. Backdrop Filter (The Apple Glassmorphism Effect) */
/* Blurs the elements that are mathematically UNDERNEATH this element */
.glass-nav {
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(10px);
}Common Pitfalls
- Using
box-shadowon a transparent PNG image with an irregular shape (like a logo).box-shadowstrictly draws a shadow around the CSS rectangular box, meaning you'll just get a shadowy square. You must usefilter: drop-shadow()instead, which analyzes the alpha channel and perfectly traces the shape of the logo. - Abusing
backdrop-filteron massive elements. Calculating pixel blurs in real-time is extremely GPU intensive. Applying backdrop filters to massive, full-screen layers can cause severe scroll lag on cheaper mobile phones.
Interview Questions
Q:
What is the mechanical difference between
filter: drop-shadow() and box-shadow?A:
box-shadow applies a hardware-accelerated shadow strictly to the bounding rectangular Box Model of the element. drop-shadow() calculates the exact alpha-transparency mask of the pixels (like SVG paths or PNGs) and traces the shadow precisely along those visual edges.
Real-World Example
The classic 'Glassmorphism' modern UI card.
example
css
.glass-card {
/* Semi-transparent white background */
background: rgba(255, 255, 255, 0.1);
/* Blurs the background behind it */
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px); /* Safari support */
/* A subtle white border for the 'glass edge' highlight */
border: 1px solid rgba(255, 255, 255, 0.2);
/* Standard shadow for depth */
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}Check Your Knowledge
Test your understanding of Filters & Shadows with these quick questions.