CSS — Lesson 15
Shadows & Effects
Adding depth with box shadows, text shadows, and filters.
Shadows & Effects
Shadows and filters add depth, dimension, and visual polish to your designs.
Box Shadow
.card {
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
/* x offset, y offset, blur, spread, color */
.elevated {
box-shadow: 0 4px 12px 2px rgba(0,0,0,0.15);
}
/* Inset shadow */
.pressed {
box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}
Text Shadow
.heading {
text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}
CSS Filters
.blur { filter: blur(4px); }
.grayscale { filter: grayscale(100%); }
.bright { filter: brightness(1.2); }
.contrast { filter: contrast(150%); }
.sepia { filter: sepia(80%); }
Transition + Shadow Hover
.card {
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
transition: box-shadow 0.3s ease;
}
.card:hover {
box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
Tip: Use subtle shadows for depth and larger shadows for elevated elements. Combine shadows with transitions for polished hover effects.
Practice what you learned in the Deoit Editor — a free, browser-based code editor.
Open Editor →