Shadows - Box and Text Shadows

What are Shadows?

CSS provides two types of shadows: box-shadow for element shadows and text-shadow for text shadows. They add depth and visual interest to designs.

Shadow Properties - Quick Reference

Property	Description	Example
`box-shadow`	Element shadow	`box-shadow: 2px 2px 8px rgba(0,0,0,0.2);`
`text-shadow`	Text shadow	`text-shadow: 2px 2px 4px rgba(0,0,0,0.5);`

box-shadow Syntax

box-shadow: x-offset y-offset blur-radius spread-radius color inset;

Values:

x-offset - Horizontal offset (required)
y-offset - Vertical offset (required)
blur-radius - Blur amount (optional, default 0)
spread-radius - Shadow size (optional, default 0)
color - Shadow color (optional, default black)
inset - Inner shadow (optional)

Detailed Examples

1. Basic Box Shadow

.card {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

2. Elevated Shadow

.elevated {
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.elevated:hover {
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

3. Multiple Shadows

.layered {
    box-shadow: 
        0 1px 3px rgba(0,0,0,0.12),
        0 1px 2px rgba(0,0,0,0.24);
}

4. Inset Shadow

.inset {
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}

5. Colored Shadow

.colored {
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3);
}

text-shadow Examples

1. Basic Text Shadow

.text-shadow {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

2. Text Glow

.glow {
    text-shadow: 
        0 0 10px #fff,
        0 0 20px #fff,
        0 0 30px #007bff;
}

3. 3D Text

.text-3d {
    text-shadow: 
        1px 1px 0 #ccc,
        2px 2px 0 #bbb,
        3px 3px 0 #aaa,
        4px 4px 0 #999;
}

Common Shadow Patterns

Pattern 1: Material Design Shadows

.shadow-sm {
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.shadow-md {
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.shadow-lg {
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

.shadow-xl {
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

Pattern 2: Neumorphism

.neumorphic {
    background: #e0e0e0;
    box-shadow: 
        8px 8px 16px #bebebe,
        -8px -8px 16px #ffffff;
}

Pattern 3: Floating Card

.floating-card {
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: box-shadow 0.3s;
}

.floating-card:hover {
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
    transform: translateY(-2px);
}

Shadows - Box and Text Shadows

On this page