Box Shadow Generator
Drag the sliders to shape offset, blur, spread and color, stack multiple shadow layers, and copy the finished box-shadow CSS instantly.
Maximum of 6 shadow layers
What CSS box-shadow actually does
The box-shadow property draws one or more drop shadows around an element's border box without needing an image, a pseudo-element, or any extra markup. Because it's a computed effect rather than a downloaded asset, it scales cleanly to any element size, stays sharp at any screen density, and can be restyled in an instant by changing a few numbers. This generator builds valid box-shadow values from sliders for offset, blur, spread, color and opacity, so the syntax never has to be memorized or hand-typed.
How to read a box-shadow value
A single shadow layer is five values in a fixed order: box-shadow: h-offset v-offset blur spread color;. Optionally, the keyword inset can be added before or after those values to flip the shadow to the inside of the element.
| Value | What it controls | Typical range |
|---|---|---|
| Horizontal offset (X) | Moves the shadow right (positive) or left (negative) | -50px to 50px |
| Vertical offset (Y) | Moves the shadow down (positive) or up (negative) | -50px to 50px |
| Blur radius | Softens the edge into a fade; 0 gives a hard edge | 0px to 100px |
| Spread radius | Grows the shadow outward (positive) or shrinks it (negative) | -50px to 50px |
| Color + opacity | The shadow's color, usually at partial opacity | rgba() with 5–25% alpha |
Stacking multiple shadows
box-shadow accepts a comma-separated list of shadow layers, and the browser paints them in the order they're listed — the first layer sits closest to the element, on top of the layers after it. This is how realistic, physically-plausible shadows are usually built: a tight, darker shadow close to the edge combined with a softer, lighter, more spread-out shadow further away, mimicking how real light sources cast both a sharp contact shadow and a diffuse ambient one. The + Add shadow layer button in this generator stacks up to 6 layers, each with its own offset, blur, spread, color and inset toggle.
Outer vs. inset shadows
By default a shadow is drawn outside the element's border box, appearing to lift the element above the page. Adding inset draws the same shadow inside the box instead, along its inner edge, which reads as the element being pressed into the surface rather than raised off it. Inset shadows are the standard technique for pressed buttons, recessed search fields, and the inward shading half of a neumorphic design — this tool's Inset checkbox toggles the keyword independently per layer.
Example 1 — a soft card shadow. X 0, Y 2, Blur 8, Spread 0, near-black at 8% opacity, plus a tighter X 0, Y 1, Blur 2, Spread 0 layer at 6% opacity, gives a subtle two-layer lift used for cards and panels — this is the Soft preset.
Example 2 — Material Design elevation. Three stacked shadows with progressively larger blur and spread at low opacity (roughly 12–20%) approximate Google's Material Design elevation shadows, giving a believable sense of a surface floating a few pixels above the page — this is the Material preset.
Example 3 — a hard, flat shadow. X 6, Y 6, Blur 0, Spread 0, solid black at 100% opacity produces a crisp, offset block shadow with no fade at all — a popular "retro" or neubrutalist look, and the Hard preset in this generator.
Neumorphism: light and dark shadows on a matching background
Neumorphism (also called "soft UI") relies on two shadow layers of opposite sign on a surface whose color matches the page background: a darker shadow offset toward the bottom-right and a lighter shadow offset toward the top-left, both with a fairly large blur and no spread. Because the element's own background is the same color as the page, the shadows alone create the illusion of a shape gently raised from, or pressed into, a single continuous surface — swap to the Inset checkbox to flip it from "raised" to "pressed in."
| Preset | Layers | Best for |
|---|---|---|
| Soft | 2 layers, low opacity, small blur | Cards, panels, subtle elevation |
| Material | 3 layers, graduated blur/spread | Buttons, dialogs, Material Design UI |
| Neumorphic | 2 layers, opposite offsets, matching background | Soft UI, skeuomorphic controls |
| Hard | 1 layer, zero blur, full opacity | Retro, neubrutalist, comic-style UI |
Common mistakes
- Forgetting spread entirely. A shadow with only blur can look big and hazy; a small negative spread (like -1px to -4px) tightens it back up so it reads as intentional rather than smudged.
- Using a fully opaque shadow color. Real-world shadows are rarely solid black — most soft, natural-looking shadows sit at 5–25% opacity, which is why every layer in this generator has its own alpha slider.
- Confusing blur with spread. Blur fades the edge of the existing shadow shape; spread changes the size of that shape before the fade is applied. Increasing blur alone makes a shadow softer but not bigger; increasing spread makes it bigger but keeps its edge sharpness.
- Mismatched surface color in neumorphism. The neumorphic effect depends on the element and the page sharing the same background color — a white card on a gray page will not read as neumorphic no matter how the two shadow layers are tuned.
Sources & further reading
Frequently asked questions
How do I create a CSS box-shadow with this generator?
Drag the X and Y sliders to set how far the shadow falls, Blur to soften its edge, and Spread to grow or shrink it, then pick a color and opacity. Turn on Inset to flip it into a shadow that sits inside the element instead of outside it. For example, X 0, Y 4, Blur 6, Spread -1, black at 10% opacity produces box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1); — press Copy CSS to grab that line ready to paste into your stylesheet.
What do the offset, blur and spread values in box-shadow actually mean?
A box-shadow value reads as horizontal offset, vertical offset, blur radius, spread radius, then color. Horizontal and vertical offset move the shadow left/right and up/down from the element; blur radius softens the edge into a fade, with 0 giving a hard edge; and spread radius grows the shadow outward in every direction when positive, or shrinks it when negative. Only the two offsets are required in plain CSS — blur and spread default to 0 if omitted, which is why this generator always writes all four numbers explicitly.
What is an inset box-shadow and how is it different from a normal one?
Adding the inset keyword flips a shadow from casting outward beyond the element's edge to appearing inside it, as if the element were pressed into the page rather than raised above it. The Y value still moves the shadow down when positive and up when negative, but now it falls along the element's inner edge instead of outside it — commonly used for pressed buttons, recessed input fields, or the inner shading in a neumorphic design. This generator's Inset checkbox toggles the keyword per layer, so outward and inset shadows can be mixed in the same stack.
How do I stack multiple box-shadows for effects like Material Design or neumorphism?
CSS lets box-shadow take a comma-separated list of shadows, painted in the order listed — the first shadow sits on top, closest to the element. Material Design's elevation effect layers two or three shadows with different blur and spread at low opacity to fake a soft, physically plausible drop shadow, while neumorphism pairs a dark shadow on one side with a light shadow on the opposite side of a surface that matches the background, creating a soft raised or pressed look. Use + Add shadow layer to stack up to 6 layers, or start from the Soft, Material, Neumorphic or Hard preset and fine-tune from there.
Is my shadow design sent to a server?
No. Every slider, color and layer in this box-shadow generator is computed and rendered locally in your browser with plain JavaScript and CSS — nothing is uploaded, logged or shared. Your last design is saved only in your own browser's local storage so the tool reopens where you left off, and no account or sign-up is required.