CSS box shadow documentation

Nine guides, written against the generator itself. Start with how the property works, then layering, then the format your project needs. Every code sample is the tool's real output.

  1. 01

    How CSS box-shadow works

    Offset, blur, spread, colour and inset, one value at a time, with what each does to the pixels.

  2. 02

    Multiple box shadows: layering for realism

    Why one shadow reads as a sticker, and how to stack three or four so the depth looks real.

  3. 03

    Inset box shadow: wells, pressed states and inner glow

    The inset keyword, how inner shadows are drawn, and where they earn their place.

  4. 04

    CSS, SCSS, Tailwind and Stylus output

    What each of the four formats gives you and how to drop it into a project.

  5. 05

    Presets, saving and the JSON import and export format

    The preset library, saving your own, and the JSON file the import and export buttons use.

  6. 06

    Sharing a box shadow by URL

    How the whole state lives in the address bar and how to deep-link the generator.

  7. 07

    Keyboard shortcuts and accessibility

    The generator without a mouse: arrow keys, slider steps, layer switching and copy.

  8. 08

    Browser support for box-shadow

    Where box-shadow works today, the prefix you no longer need, and the colour formats to watch.

  9. 09

    Box shadow performance and paint cost

    What shadows cost to paint, why animating box-shadow drops frames, and the cheap way to animate elevation.

Open the generator

Or browse the examples gallery for finished shadows with their code.

By Mark McNeece, Founder, 365i. Published . Last reviewed .

Editorial integrity: read our editorial standards.