CSS Box Shadow Generator
Generate CSS box-shadow with a live visual preview.
By Syed Mubashir Ali · Last updated
Three shadow recipes that work
Start from one of these and adjust to taste, instead of dragging sliders from zero. Each is a complete box-shadow value.
The card lift
'0 1px 3px #0000001f, 0 6px 18px #00000014'. The standard elevated card: a crisp 1px edge so the card doesn't blur into the background, plus a wide faint wash for height. If your cards look like they're floating too high, reduce the second layer's blur before touching anything else.
The floating button
'0 4px 14px #00000033'. Buttons sit higher than cards, so the shadow is darker and tighter underneath: mostly vertical offset, moderate blur, no horizontal drift. On hover, deepen it slightly ('0 6px 20px #00000040') and the button feels like it rises. That's the whole interaction.
The inner well
'inset 0 2px 6px #00000026'. Tick Inset and the shadow moves inside the border: input fields, pressed buttons, sunken panels. Keep it subtle: inset shadows go from 'recessed' to 'dirty' fast, and the fix is always less opacity, never less blur.
Mistakes that make shadows look cheap
The classic is the solid black shadow: '0 5px 15px #000' reads as a Photoshop drop shadow from 2004. Real shadows are the colour of the absence of light, which in practice means dark and transparent: start at 10–25% opacity and only go darker if the background demands it.
The second is the sideways shadow. Unless you're deliberately lighting from the side, keep the horizontal offset at or near zero; shadows that slide sideways look like rendering bugs. Vertical offset plus blur is what reads as height.
The third is one giant blur doing all the work. A single '0 0 40px' wash has no edge definition, so the element looks out of focus rather than elevated. The two-layer recipe (tight plus wide) fixes it every time. And if you're animating the shadow, don't animate the box-shadow property itself; fade a pseudo-element's opacity instead, or low-end phones will stutter.
How to Use Box Shadow Generator
- 1Use the sliders to set the shadow's horizontal offset (X), vertical offset (Y), blur and spread, each in pixels.
- 2Choose the shadow colour with the colour picker, or type a hex code. An 8-digit hex such as #00000040 sets the transparency too.
- 3Tick 'Inset' for a shadow inside the element, as on a pressed button or an input field.
- 4Add up to four shadow layers with 'Add Shadow Layer'. Combining a tight dark shadow with a wide soft one looks more natural than a single shadow.
- 5Before you copy it, think about where it will sit: a shadow tuned on a white card can vanish on a grey page, so check it in place too.
- 6Copy the generated box-shadow CSS and paste it into your stylesheet.
Frequently Asked Questions
What do the four box-shadow numbers mean?
In 'box-shadow: 4px 4px 10px 0px #00000040' the values are the horizontal offset (positive moves the shadow right), the vertical offset (positive moves it down), the blur radius (higher is softer) and the spread (positive makes the shadow bigger than the element, negative smaller). The last value is the colour.
How do I make a soft, realistic shadow?
Use a low-opacity dark colour, a vertical offset, plenty of blur and little or no horizontal offset, so light seems to come from above. Two layers work even better, for example '0 1px 2px #0000001f, 0 8px 24px #00000014': a tight shadow for the edge and a wide one for depth.
What does inset do?
It draws the shadow inside the element's border instead of outside, so the element looks pressed in. It's used for input fields, pressed buttons and wells. Inset and normal layers can be combined in one box-shadow.
What's the 8-digit hex colour?
The last two digits set the opacity: 00 is fully transparent and FF is solid. #00000040 is black at about 25% opacity, a good starting point for shadows. Pure, solid black shadows usually look harsh.
Does box-shadow affect layout or performance?
A shadow doesn't take up space or move other elements. Very large blurs on many elements, especially while they animate, can slow scrolling on low-end phones; for animated shadows, animating opacity on a pseudo-element is smoother.
Is box-shadow the same as drop-shadow?
No. box-shadow follows the element's rectangular box (and its border-radius). The CSS filter drop-shadow() follows the visible shape of the content, such as the outline of a transparent PNG icon.
Why does my shadow look grey and muddy instead of soft?
Usually two culprits: the colour is pure grey rather than the scene's own tones, and the opacity is too high. Try the element's own hue darkened at 10–16% opacity instead of neutral black: a blue-tinted shadow on a blue card looks like ambient light, while grey looks like dirt. And when in doubt, more blur and less opacity beats the reverse.
About Box Shadow Generator
Shadows are how flat rectangles pretend to have depth, and the difference between a convincing one and a cheap one is about four numbers. The Box Shadow Generator lets you tune those numbers by eye: drag the sliders for offset, blur and spread, pick a colour with real transparency, flip to inset, and watch the preview change live. The CSS updates as you drag and copies with one click.
The feature that separates this from guessing values in devtools is layering. Real shadows aren't one blur. They're a dark contact edge where the object meets the surface plus a wide soft wash further out. Stacking up to four layers in a single box-shadow replicates that: a tight layer for the edge, a broad faint one for the atmosphere. Design systems such as Material Design and Tailwind build their elevation shadows the same way.
It runs entirely in your browser, and the output is one standard box-shadow declaration that works everywhere. Pair it with the CSS Gradient Generator when a flat background needs both colour and depth.