CSS box-shadow examples
Nine ready-to-copy shadows, from a barely-there card lift to a full pressed-inset effect. Each one is exactly what the generator's preset chips produce, so you can copy the CSS here or open the tool and keep tuning it live.
Copy a preset
Subtle
box-shadow: 0 1px 3px rgba(0,0,0,0.12);Elevation 1
box-shadow: 0 1px 2px rgba(0,0,0,0.18),
0 1px 3px rgba(0,0,0,0.12);Elevation 2
box-shadow: 0 3px 4px -2px rgba(0,0,0,0.20),
0 4px 5px rgba(0,0,0,0.14),
0 1px 10px rgba(0,0,0,0.12);Elevation 3
box-shadow: 0 5px 5px -3px rgba(0,0,0,0.20),
0 8px 10px 1px rgba(0,0,0,0.14),
0 3px 14px 2px rgba(0,0,0,0.12);Elevation 4
box-shadow: 0 8px 10px -5px rgba(0,0,0,0.20),
0 16px 24px 2px rgba(0,0,0,0.14),
0 6px 30px 5px rgba(0,0,0,0.12);Hard shadow
box-shadow: 8px 8px 0 rgba(0,0,0,0.85);Long shadow
box-shadow: 1px 1px 0 rgba(0,0,0,0.05),
2px 2px 0 rgba(0,0,0,0.05),
3px 3px 0 rgba(0,0,0,0.05),
4px 4px 0 rgba(0,0,0,0.05),
5px 5px 0 rgba(0,0,0,0.05),
6px 6px 0 rgba(0,0,0,0.05),
7px 7px 0 rgba(0,0,0,0.05),
8px 8px 0 rgba(0,0,0,0.05);Inset / pressed
box-shadow: inset 2px 2px 5px rgba(0,0,0,0.30),
inset -2px -2px 5px rgba(255,255,255,0.35);Glow
box-shadow: 0 0 24px 4px rgba(164,103,233,0.55);Reading these examples
Every card above is a single box-shadow declaration, formatted across multiple lines here only for readability — a browser is fine with it all on one line. Comma-separated shadows paint front to back, so in every multi-layer example the first shadow listed is the one closest to the surface (a tight, dark, near shadow) and the last is the widest and palest (soft ambient light reaching furthest out).
The elevation series increases offset, blur and spread together, level by level, which is what makes a card look like it is floating progressively higher off the page rather than just getting a bigger blur. The inset/pressed example pairs a dark shadow on the top-left with a light one on the bottom-right, both inset, which is the entire neumorphic "pressed into the surface" effect — no image, no gradient, just two shadows facing opposite corners.
Frequently asked questions
Can I paste these box-shadow values straight into my CSS?
Yes. Every value on this page is plain, valid CSS you can paste onto any element's box-shadow property as-is. Nothing here depends on a preprocessor, a framework class or a build step.
Why do the layered examples use several rgba() values instead of one?
Comma-separated shadows are painted front to back, so listing a tighter, darker shadow first and a softer, paler one after it approximates how two overlapping light sources actually behave. A single shadow can only be one softness at one distance; two or three stacked shadows can be both close and far at once.
What makes the "long shadow" example so much CSS?
The flat-design long-shadow look is a solid-colour trail, not a blur, so it has to be built from many thin, unblurred layers stepping diagonally outward one pixel at a time rather than from one shadow with a large offset. More steps make a longer, smoother trail at the cost of a longer declaration and a heavier paint; the generator can produce any step count on demand.
Can I edit these visually instead of hand-tuning the numbers?
Yes — every example on this page is one of the preset chips in the generator itself. Open the generator, click the matching preset, and every offset, blur, spread, colour and alpha becomes an editable slider.