CSSCSS Advanced

Lesson

CSS Shadows

10 min reading

Free Course

CSS Shadows: Drop Shadows for Boxes and Text Depth Effects

CSS shadow properties—box-shadow and text-shadow—add visual elevation, depth, and glow effects to element containers and text content.

Box-Shadow and Text-Shadow Syntax

Shadow declarations accept horizontal offset, vertical offset, blur radius, spread radius, and color:

/* Box Shadow Syntax: x-offset | y-offset | blur-radius | spread-radius | color */
.card-shadow {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
}

/* Inset Box Shadow (Inner shadow) */
.input-inset {
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Text Shadow Syntax: x-offset | y-offset | blur-radius | color */
.headline-shadow {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

Shadow parameters explained:

Horizontal Offset (x): Positive values shift shadow right; negative shifts left.
Vertical Offset (y): Positive values shift shadow down; negative shifts up.
Blur Radius: Higher values create softer, more spread-out shadow edges.
Spread Radius: Expands or shrinks the size of the shadow.
Color: Semi-transparent rgba(0, 0, 0, 0.3) creates realistic natural shadows.

Shadow Layering Elevation

flowchart TD
    A["UI Elevation Levels"] --> B["Low Elevation (box-shadow: 0 1px 3px rgba(0,0,0,0.2))"]
    A --> C["Medium Elevation (box-shadow: 0 10px 15px rgba(0,0,0,0.3))"]
    A --> D["High Elevation Modal (box-shadow: 0 25px 50px rgba(0,0,0,0.5))"]

Practical Code Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS Shadows Demonstration</title>
    <style>
        .elevated-card {
            background-color: #1e293b;
            padding: 2rem;
            border-radius: 12px;
            max-width: 450px;
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
            transition: box-shadow 0.3s ease, transform 0.3s ease;
        }
        .elevated-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 25px 30px -5px rgba(0, 0, 0, 0.7);
        }
    </style>
</head>
<body style="background-color: #0f172a; color: #f8fafc; font-family: system-ui, sans-serif; padding: 2rem;">

    <div class="elevated-card">
        <h3 style="color: #38bdf8; margin-top: 0;">Elevated Card Surface</h3>
        <p>Using multi-layered <code>box-shadow</code> declarations creates realistic Material UI elevation depth.</p>
    </div>

</body>
</html>

Best Practices

Use semi-transparent RGBA colors for realistic shadows: Avoid pure black (#000000) hard shadows; use rgba(0, 0, 0, 0.2) to create soft natural drop shadows.
Layer multi-part box-shadows: Combine two subtle shadow declarations in a single rule for a smooth ambient glow.
Increase box-shadow on hover: Lift cards visually on mouse hover to indicate interactive elevation.

Self-Check Challenge

Create a CSS class .card-glow applying box-shadow: 0 4px 14px rgba(56, 189, 248, 0.4);!

Save Your Progress

Unlock Your
Full Potential.

Sign in to track your learning journey, earn industry-recognized certificates, and join our elite developer community.

Quick Access With

Enterprise-Grade Security Protocol

Recommended Courses & Books

Try it Yourself

Experiment with the code from this lesson in our interactive playground.

Open Playground

Stuck on this lesson?

Join our community of senior developers.

Ask in Forum

CSSCSS Advanced

Lesson

CSS Shadows

10 min reading

Free Course

CSS Shadows: Drop Shadows for Boxes and Text Depth Effects

CSS shadow properties—box-shadow and text-shadow—add visual elevation, depth, and glow effects to element containers and text content.

Box-Shadow and Text-Shadow Syntax

Shadow declarations accept horizontal offset, vertical offset, blur radius, spread radius, and color:

/* Box Shadow Syntax: x-offset | y-offset | blur-radius | spread-radius | color */
.card-shadow {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
}

/* Inset Box Shadow (Inner shadow) */
.input-inset {
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Text Shadow Syntax: x-offset | y-offset | blur-radius | color */
.headline-shadow {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

Shadow parameters explained:

Horizontal Offset (x): Positive values shift shadow right; negative shifts left.
Vertical Offset (y): Positive values shift shadow down; negative shifts up.
Blur Radius: Higher values create softer, more spread-out shadow edges.
Spread Radius: Expands or shrinks the size of the shadow.
Color: Semi-transparent rgba(0, 0, 0, 0.3) creates realistic natural shadows.

Shadow Layering Elevation

flowchart TD
    A["UI Elevation Levels"] --> B["Low Elevation (box-shadow: 0 1px 3px rgba(0,0,0,0.2))"]
    A --> C["Medium Elevation (box-shadow: 0 10px 15px rgba(0,0,0,0.3))"]
    A --> D["High Elevation Modal (box-shadow: 0 25px 50px rgba(0,0,0,0.5))"]

Practical Code Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS Shadows Demonstration</title>
    <style>
        .elevated-card {
            background-color: #1e293b;
            padding: 2rem;
            border-radius: 12px;
            max-width: 450px;
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
            transition: box-shadow 0.3s ease, transform 0.3s ease;
        }
        .elevated-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 25px 30px -5px rgba(0, 0, 0, 0.7);
        }
    </style>
</head>
<body style="background-color: #0f172a; color: #f8fafc; font-family: system-ui, sans-serif; padding: 2rem;">

    <div class="elevated-card">
        <h3 style="color: #38bdf8; margin-top: 0;">Elevated Card Surface</h3>
        <p>Using multi-layered <code>box-shadow</code> declarations creates realistic Material UI elevation depth.</p>
    </div>

</body>
</html>

Best Practices

Use semi-transparent RGBA colors for realistic shadows: Avoid pure black (#000000) hard shadows; use rgba(0, 0, 0, 0.2) to create soft natural drop shadows.
Layer multi-part box-shadows: Combine two subtle shadow declarations in a single rule for a smooth ambient glow.
Increase box-shadow on hover: Lift cards visually on mouse hover to indicate interactive elevation.

Self-Check Challenge

Create a CSS class .card-glow applying box-shadow: 0 4px 14px rgba(56, 189, 248, 0.4);!

Save Your Progress

Unlock Your
Full Potential.

Sign in to track your learning journey, earn industry-recognized certificates, and join our elite developer community.

Quick Access With

Enterprise-Grade Security Protocol

Recommended Courses & Books

Try it Yourself

Experiment with the code from this lesson in our interactive playground.

Open Playground

Stuck on this lesson?

Join our community of senior developers.

Ask in Forum

CSS Shadows

CSS Shadows: Drop Shadows for Boxes and Text Depth Effects

Box-Shadow and Text-Shadow Syntax

Shadow Layering Elevation

Practical Code Example

Best Practices

Self-Check Challenge

Unlock Your Full Potential.

Recommended Courses & Books

Try it Yourself

Stuck on this lesson?

CSS Shadows

CSS Shadows: Drop Shadows for Boxes and Text Depth Effects

Box-Shadow and Text-Shadow Syntax

Shadow Layering Elevation

Practical Code Example

Best Practices

Self-Check Challenge

Unlock Your Full Potential.

Recommended Courses & Books

Try it Yourself

Stuck on this lesson?

Unlock Your
Full Potential.

Unlock Your
Full Potential.