CSS Shadows
Add depth and dimension with box-shadow and text-shadow
✨ Creating Shadows in CSS
Shadows add depth, focus, and visual hierarchy to your designs. Learn box-shadow for elements and text-shadow for typography.
/* Box shadow example */
.card {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 20px;
border-radius: 8px;
}
/* Text shadow example */
.title {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
Output:
Title with text shadow
Types of CSS Shadows
Box Shadow
Shadows around elements
box-shadow: 0 2px 4px rgba(0,0,0,0.1);Text Shadow
Shadows behind text
text-shadow: 1px 1px 2px #000;Inset Shadow
Inner shadows for depth
box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);Multiple Shadows
Combine multiple shadow effects
box-shadow: 0 2px 4px #000, 0 8px 16px #333;🔹 Box Shadow Basics
The CSS box-shadow property adds depth and dimension with syntax: horizontal-offset vertical-offset blur-radius spread-radius color inset. For example, box-shadow: 0 4px 12px rgba(0,0,0,0.1); creates a subtle floating effect. Shadows enhance visual hierarchy, indicate interactivity, and simulate elevation in material design. Multiple shadows can be layered for complex effects. Using RGBA colors ensures transparency control, while inset creates inner shadows for pressed or recessed elements.
/* Basic box shadows */
.subtle-shadow {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.medium-shadow {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.strong-shadow {
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
.colored-shadow {
box-shadow: 0 4px 8px rgba(255, 0, 0, 0.3);
}Output:
🔹 Text Shadow Effects
Text shadows add depth, glow, and stylistic flair to typography using text-shadow: h-offset v-offset blur color. For example, text-shadow: 1px 1px 3px #000; creates a drop shadow for better contrast. Effects include soft glows, neon emulation, letterpress, and 3D extrusion via multiple shadow layers. This lightweight technique improves readability on busy backgrounds, emphasizes headings, and enables creative typographic treatments without images, supporting responsive and accessible web type across all viewports.
/* Text shadow examples */
.simple-text-shadow {
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}
.glow-effect {
text-shadow: 0 0 10px #00ff00;
color: #00ff00;
}
.embossed-text {
text-shadow: 1px 1px 0px #fff, -1px -1px 0px #000;
color: #666;
}
.multiple-text-shadow {
text-shadow:
1px 1px 0px #fff,
2px 2px 0px #999,
3px 3px 0px #666;
}Output:
🔹 Advanced Shadow Techniques
Advanced shadow techniques combine multiple box-shadow and text-shadow layers, animate shadow properties, and use CSS variables for dynamic themes. Examples include floating cards with layered shadows, neon glow effects with blur and spread, and interactive buttons with shadow transitions. These methods enhance realism, focus, and interactivity in modern UIs. Performance is optimized by avoiding excessive blur values and using GPU acceleration for smooth animations and transitions.
/* Modern card shadows */
.card-hover {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s ease;
}
.card-hover:hover {
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
/* Neumorphism effect */
.neumorphic {
background: #e0e0e0;
box-shadow:
8px 8px 16px #bebebe,
-8px -8px 16px #ffffff;
}
/* Inset shadow for pressed effect */
.pressed {
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}Output:
🔹 Shadow Color Variations
Experimenting with shadow colors—beyond black—enables vibrant, thematic, and accessible designs. Using semi-transparent colors (e.g., rgba(100, 50, 255, 0.3)) allows shadows to blend with backgrounds. Colored shadows can match brand palettes, indicate states (hover, active), or create duotone and gradient shadow effects. This technique adds personality, improves visual feedback, and supports dark mode adaptations by adjusting shadow opacity and hue based on theme variables for consistent contrast.
/* Colored shadows */
.blue-shadow {
box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3);
}
.red-shadow {
box-shadow: 0 4px 8px rgba(255, 0, 0, 0.3);
}
.green-shadow {
box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);
}
.purple-shadow {
box-shadow: 0 4px 8px rgba(108, 117, 125, 0.3);
}