CSS Shadows
CSS provides two main shadow properties — box-shadow and text-shadow. These help add depth and visual interest to elements and text.
1. Box Shadow
The box-shadow property applies shadow effects to containers:
.shadow-box {
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.25);
}
Syntax: horizontal-offset vertical-offset blur-radius color
2. Multiple Box Shadows
You can apply more than one shadow separated by commas:
.multi-shadow {
box-shadow: 2px 2px 5px gray, -2px -2px 5px lightgray;
}
3. Inset Shadow
Use the inset keyword for an inner shadow:
.inset-shadow {
box-shadow: inset 0 0 8px rgba(0,0,0,0.5);
}
4. Text Shadow
The text-shadow property adds shadow to text content:
.shadow-text {
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
}
5. Common Use Cases
- Create depth for cards, buttons, and modals
- Highlight or elevate text and elements
- Give subtle 3D effects to UI components
Conclusion
CSS shadows enhance the visual hierarchy of your design. Use them thoughtfully for subtle emphasis, or more boldly for layered, modern effects.