CSS Box Shadow Generator
Build a CSS box-shadow visually. Drag the offset, blur and spread sliders,
pick a colour and opacity, stack multiple shadow layers, toggle inset, then
copy the ready-to-use CSS. Try the Material elevation and neumorphism presets. Runs entirely
in your browser.
How to use this box-shadow generator
- Set the offset — drag the horizontal and vertical sliders to move the shadow. A small downward offset (e.g. 0 × 4 px) reads as a natural overhead light source.
- Soften it — increase blur for a diffuse shadow, or set it to 0 for a crisp graphic edge. Use spread to make the shadow larger or tighter than the element.
- Choose the colour — click the swatch and lower the opacity so the shadow blends over any background instead of looking like solid black.
- Stack layers — click + Add layer to add a second (or third) shadow. Real elevation and neumorphism use two or more layers; the active layer is the one the sliders edit.
- Toggle inset — switch a layer to inset to carve the shadow inside the element for pressed inputs and soft-UI wells.
- Copy the CSS — click Copy and paste the
box-shadowrule straight into your stylesheet.
box-shadow syntax reference
| Part | Example | What it does |
|---|---|---|
| h-offset | 4px | Moves the shadow right (positive) or left (negative). |
| v-offset | 8px | Moves the shadow down (positive) or up (negative). |
| blur | 16px | Softens the edge. 0 = hard edge; larger = more diffuse. Cannot be negative. |
| spread | -2px | Expands (positive) or contracts (negative) the shadow before blurring. |
| color | rgba(0,0,0,.2) | Shadow colour — use rgba or an 8-digit hex for transparency. |
inset | inset 0 2px 6px … | Optional keyword that draws the shadow inside the box. |
| multiple | a, b, c | Comma-separate several shadows; the first is painted on top. |
Common box-shadow patterns
- Cards & panels — a soft low-opacity shadow like
0 4px 12px rgba(0,0,0,.12)lifts a card off the page. - Material elevation — two stacked shadows (a tight one for the contact edge plus a wider ambient one) mimic Google's elevation levels.
- Buttons & hover — a small resting shadow that grows on
:hovergives a tactile lift; shrink it on:activeto feel pressed. - Neumorphism / soft UI — a dark shadow on one side and a light shadow on the opposite side make an element look extruded from its background.
- Inset fields & wells — an inset shadow makes inputs and progress tracks look recessed.
- Glow & focus rings — a zero-offset coloured shadow with spread creates a glow or an accessible focus outline.
Frequently asked questions
What do the box-shadow values mean?
The box-shadow shorthand is "box-shadow: h-offset v-offset blur spread color". The horizontal offset moves the shadow right (positive) or left (negative); the vertical offset moves it down (positive) or up (negative). Blur is how soft the edge is — 0 gives a hard edge, larger values fade it out. Spread grows (positive) or shrinks (negative) the shadow before the blur is applied. The colour is the shadow colour, usually a semi-transparent black such as rgba(0,0,0,0.2). The optional "inset" keyword draws the shadow inside the element instead of outside.
How do I add more than one shadow to an element?
CSS lets you apply several shadows to one element by separating each with a comma — for example "box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)". The first shadow in the list is painted on top. Layering is how realistic Material Design elevation and the dual light/dark shadows of neumorphism are built. In this generator, click "+ Add layer" to stack shadows; each layer has its own offset, blur, spread, colour and inset.
What is an inset shadow used for?
An inset shadow is drawn inside the element’s border box instead of outside it, which makes the element look pressed in or carved out rather than raised up. It is commonly used for input fields, pressed buttons, wells, progress tracks and the "soft UI" / neumorphism style. Toggle the Inset switch on any layer to convert it, and combine an inset dark shadow with an inset light shadow for a concave neumorphic effect.
Why use rgba or a transparent colour instead of a solid one?
Real shadows are never pure black — they let some of the background show through. Using a semi-transparent colour such as rgba(0,0,0,0.2) lets the shadow blend naturally over any background, so the same component looks right on white, grey or coloured surfaces. This generator builds an rgba() value from your chosen colour and the opacity slider, so you control exactly how strong the shadow is. As a rule of thumb, large soft shadows look best at low opacity (10–20%) and small tight shadows can go higher.
Is box-shadow good for performance, and does it need a -webkit- prefix?
box-shadow has been supported unprefixed in every modern browser since 2011, so you no longer need the -webkit-box-shadow prefix for production. It is GPU-composited and far cheaper than a shadow image, but animating the blur or spread of a large shadow on many elements can cause repaint cost — for animations, prefer transitioning opacity on a pseudo-element that holds the shadow, or animate transform. For a single static shadow there is effectively no performance concern.
What is the difference between box-shadow and filter: drop-shadow()?
box-shadow follows the element’s rectangular border box (respecting border-radius), supports spread and inset, and accepts multiple comma-separated layers. filter: drop-shadow() instead follows the actual painted shape — including transparent PNGs, SVG paths and irregular content — but it has no spread value and no inset. Use box-shadow for cards, buttons and panels; use drop-shadow when you need a shadow that hugs a non-rectangular graphic.