What the box-shadow generator is for
The CSS box-shadow property adds one or more shadows around any HTML element and is the main tool for conveying depth and elevation in an interface. With it you build the cards that seem to float above the background, buttons with relief, modals that lift off the page and dropdown menus that rest on top of the content. A shadow blends five ingredients: how far it shifts horizontally (offset-x) and vertically (offset-y), how blurry it is (blur), how much it spreads before blurring (spread), and its color and opacity. This generator lets you move every value with sliders or type it by hand, see the result live on a checkerboard background —so you can spot transparency— and copy the box-shadow code ready to paste. You can also stack multiple layers and enable inset mode for inner shadows.
The box-shadow parameters, one by one
The syntax is box-shadow: offset-x offset-y blur spread color; (plus the optional inset keyword at the start). This table sums up what each value does, its typical range and what happens when it is negative:
| Parameter | What it does | Typical values | If negative |
|---|---|---|---|
| offset-x | Shifts the shadow horizontally. | 0 on cards; ±2–10px for side light. | The shadow moves to the left. |
| offset-y | Shifts the shadow vertically. | 4–20px (simulates overhead light). | The shadow rises, like light from below. |
| blur-radius | Blurs the edge of the shadow. | 0 = hard; 8–30px = soft and modern. | Not allowed: it is ignored, minimum 0. |
| spread-radius | Grows or shrinks the shadow before the blur. | 0 in most cases. | Contracts the shadow: smaller than the element. |
| color | Color and opacity (ideally rgba). | Black rgba with 4–15% alpha. | N/A (there is no negative color). |
| inset | Projects the shadow inward. | Pressed inputs, drop zones, neumorphism. | N/A (it is a keyword, not a number). |
box-shadow vs drop-shadow vs text-shadow
Three different properties make shadows in CSS and they should not be confused:
| Property | What it projects onto | Supports inset / spread | When to use it |
|---|---|---|---|
box-shadow | The element's box (respects border-radius). | Yes to both. | Cards, buttons, modals, UI elevation. |
filter: drop-shadow() | The real pixels, including PNG/SVG transparency. | No to either; runs on the GPU. | Icons, cut-out images, irregular shapes. |
text-shadow | The text glyphs. | No (no spread or inset). | Text legibility over images, headings. |
The trick of stacking multiple shadows
The "premium" shadows you see on Stripe, Vercel or Linear are not a single one: they are two or three stacked layers. A short, sharp one right against the element (offset-y of 1–2px, low blur, medium opacity) and a long, diffuse one further down (offset-y of 8–24px, high blur, low opacity). That mimics real light, which casts a direct shadow and an indirect one. With the "+ add shadow" button you stack layers and the generator joins them with a comma:
box-shadow:
0 1px 2px rgba(15, 23, 42, 0.06),
0 8px 24px rgba(15, 23, 42, 0.10);Inner shadows (inset) and neumorphism
The inset keyword pushes the shadow inside the element and simulates a sunken surface. Legitimate cases: pressed-state inputs, containers that look carved into the page and active drag zones. The neumorphism effect combines two shadows: a light one top-left and a dark one bottom-right, so the element seems made of the same material as the background, barely raised. Try the "Neumorphism" preset to see the pattern.
Shadows and dark mode
On dark backgrounds black shadows nearly vanish: black on black has no contrast. Three practical fixes:
- Light borders instead of a shadow:
border: 1px solid rgba(255,255,255,0.08). - More opaque shadows (20–40% instead of 8–12%) and with more blur.
- Colored shadows: a shadow tinted with the brand color at low opacity gives a glow effect rather than depth.
Performance: when it can break the frame rate
Unlike filter: drop-shadow(), which runs on the GPU, box-shadow is computed on the CPU. A large blur across dozens of elements, or animating the blur in real time, can hurt smoothness. If you need to animate a shadow on hover, animate transform or transition the opacity of an already-rendered shadow layer instead of recomputing the blur every frame.