Multiple Box Shadows

Multiple shadows can be applied to a single element by separating them with commas. They are rendered from front to back — the first shadow listed appears on top.

Why Multiple Shadows?

Real-world lighting rarely produces a single sharp shadow. Using two or three layered shadows — a close sharp one and a distant soft one — creates a much more convincing depth effect than any single shadow.

Combining Techniques

Mix an inset shadow with an outer shadow to simulate a pressed or embossed state. Use a zero-blur, zero-offset shadow with positive spread as a fake border that does not affect layout.

Example

/* Two-layer shadow — close sharp + far soft */
.card {
    box-shadow:
        0  1px  3px rgb(0 0 0 / 0.12),
        0  4px 12px rgb(0 0 0 / 0.10);
}

/* Three-layer Material Design-style elevation */
.elevated {
    box-shadow:
        0  2px  4px rgb(0 0 0 / 0.07),
        0  4px  8px rgb(0 0 0 / 0.07),
        0 16px 24px rgb(0 0 0 / 0.07);
}

/* Shadow as a fake border (no layout impact) */
.focus-ring:focus {
    box-shadow:
        0 0 0 3px #fff,       /* white gap */
        0 0 0 6px #1a73e8;    /* coloured ring */
    outline: none;
}

/* Pressed button state with inset + outer shadow */
.btn:active {
    box-shadow:
        inset 0 2px 4px rgb(0 0 0 / 0.20),
        0 1px 2px rgb(0 0 0 / 0.08);
    transform: translateY(1px);
}

CSS

Full Editor

Pro Tip

The "double ring" focus indicator using two box-shadows (0 0 0 3px white, 0 0 0 6px blue) works on any background colour and is a widely used accessible focus style — it does not require changing outline at all.

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned