ReviseAlgo Logo

CSS Basics

Shadows

Master CSS shadows, covering box-shadow, text-shadow, offset coordinates, blur, spread, inset overlays, and performance best practices.

Last Updated: July 15, 2026 • 10 min read

1. Learning Objectives

In this lesson, you will master adding depth using CSS shadows. By the end of this topic, you will be able to:

  • Implement outer and inner shadows on elements using the box-shadow property.
  • Apply text shadows using the text-shadow property.
  • Understand the five parameters of the box-shadow property (horizontal offset, vertical offset, blur radius, spread radius, and color).
  • Use transparent colors (like rgba()) to create realistic, soft shadows.
  • Optimize shadow rendering performance to prevent page scroll lag.

2. Overview

CSS shadows add depth, elevation, and visual hierarchy to web designs. The box-shadow property projects shadows from element boxes, while text-shadow projects shadows from text characters. Both properties use coordinates to control offset, blur, and color.

3. Why This Topic Matters

Shadows define depth and material hierarchies on the web:

  • Unrealistic visual designs: Using solid black colors for shadows (e.g. box-shadow: 5px 5px 10px black;) results in harsh, muddy layouts. Professional web designs use soft, transparent shadows (like rgba(0,0,0,0.1)).
  • Performance Issues: Large, complex shadows with high blur values can slow down browser rendering, causing animation or scrolling lag on low-end mobile devices.

4. Real-World Analogy

Think of adding CSS shadows like **shining a flashlight on paper shapes**:

  • Horizontal & Vertical Offsets: Moving the flashlight left/right or up/down shifts the direction of the shadow behind the paper.
  • Blur Radius: Adjusting the flashlight focus. A soft, fuzzy shadow (high blur) suggests the paper is floating high above the desk, while a sharp, crisp shadow (low blur) suggests the paper is resting close to the desk surface.
  • Spread Radius: Making the paper shape larger or smaller, expanding or contracting the outline of the shadow cast on the wall.

5. Core Concepts

The box-shadow property accepts five parameters in this specific order:

Parameter Unit / Type Visual Layout Action
Horizontal Offset Length (e.g. 4px) Shifts the shadow right (positive values) or left (negative values).
Vertical Offset Length (e.g. 8px) Shifts the shadow down (positive values) or up (negative values).
Blur Radius Length (e.g. 12px) Controls how soft or fuzzy the shadow is. Larger values create softer shadows.
Spread Radius Length (e.g. 2px) Expands (positive values) or contracts (negative values) the size of the shadow.
Color Color (e.g. rgba(0,0,0,0.1)) Sets the shadow color. Using semi-transparent values is a best practice.

6. Syntax & API Reference

Below is the typical configuration for soft box shadows and text shadows:

7. Visual Diagram

This diagram displays how offset and blur parameters shape shadows:

8. Live Example — Full Working Code

A sample HTML document showcasing box elevation layers, inset inputs, and text shadows:

9. Interactive Playground

Try It Yourself Challenges:

  1. Change the shadow color parameter from rgba(0,0,0,0.08) to solid black #000000 and note how the design changes.
  2. Add a spread value to the card shadow and observe how it expands the shadow's outline.

10. Common Mistakes

Mistake Why it happens Wrong Correct
Harsh, opaque shadows Using solid black colors for shadows, making them look harsh and unrealistic. box-shadow: 4px 4px 8px #000; box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.1);
Clipping shadows with hidden overflow Declaring overflow: hidden on parent containers, which clips child box-shadow outlines. parent { overflow: hidden; } Ensure shadows have enough outer margin or padding spacing inside boundaries.

11. Best Practices

  • Use transparent colors for soft shadows: Always use semi-transparent colors (like rgba(0,0,0,0.08) or hsla(...)) instead of solid colors to keep shadows soft and realistic.
  • Keep shadows subtle: Rely on low offset and spread values. Good shadows should guide the user's eye and define depth without being distracting.
  • Match shadow direction: Keep the light source direction consistent across the entire page (e.g. all shadows offset slightly downwards, indicating a light source from above).
  • Mind rendering performance: Avoid using large blur and spread values on elements that animate or resize to prevent page scroll lag.

12. Browser Compatibility

Feature Chrome Firefox Safari Edge
box-shadow element mapping Supported (10+) Supported (4+) Supported (5.1+) Supported (12+)
text-shadow controls Supported (4+) Supported (3.5+) Supported (4+) Supported (12+)

13. Interview Questions

🟢 Q1: How do you declare multiple layered shadows on a single element box using box-shadow?

Answer: You can apply multiple shadows to a single element by separating each shadow declaration with a comma inside the box-shadow property. The browser stacks these shadows from front to back, rendering the first declared shadow on top:
box-shadow: 0 2px 4px rgba(0,0,0,0.05), 0 10px 20px rgba(0,0,0,0.08);.

14. Debugging Exercise

Identify and fix the usability issues in this elevated grid layout:

View Solution

Diagnosis: The overflow: hidden property clips all content and visual overlays that exceed the element's borders. Because shadows render outside the element's border box, they are clipped and made invisible. To fix this, remove overflow: hidden from the card styles, or use margins to create space for the shadow.

Fixed CSS:

15. Practice Exercises

Exercise 1: Elevated Interactive Button

Build a button styling rule. Apply a subtle box-shadow, and write an active selector rule (:active) that shifts the button down and shrinks the shadow to make the button look like it is being pressed down.

16. Scenario-Based Challenge

The Dashboard Elevation hierarchy Challenge:

You are designing a complex web dashboard layout containing floating dropdown menus, modal dialog popups, and side-by-side content cards. The interface currently looks flat, making it hard for users to distinguish active overlays from background elements. Propose a z-index and box-shadow elevation hierarchy to improve the visual design.

17. Quick Quiz

Q1: Which box-shadow parameter controls the softness or fuzziness of the shadow edges?

A) vertical offset

B) spread radius

C) blur radius

Answer: C — The blur radius parameter controls how soft or fuzzy the shadow's edges are.

18. Summary & Key Takeaways

  • • Use transparent colors like RGBA for soft, realistic shadows.
  • • Make sure parent container overflow settings don't clip your shadow outlines.

19. Cheat Sheet

Value Type Usage Syntax Example
Inset Box Shadow box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);