CSS Box Shadow Generator
Design CSS box-shadows visually with sliders for offset, blur, spread and opacity. Stack up to five layers for realistic depth, flip any layer to inset, and preview against a light or dark stage with your own card colour and radius. Ten presets from subtle to neumorphic to neon. Everything runs in your browser. Free, no signup.
Presets replace every layer. Add layers to stack shadows.
How to Use This Tool
- Set the offset, blur and spread — horizontal and vertical offset move the shadow, blur softens its edge, and spread grows or shrinks it before blurring.
- Choose a colour and opacity — pick any colour and drop the opacity. Most good shadows are a low-opacity dark colour rather than solid grey.
- Stack more layers for realism — add up to five layers and select each one to edit it. Two or three layers at different blurs read far more naturally than one.
- Copy the CSS — preview against a light or dark stage, then copy the full rule or just the box-shadow value.
About CSS Box Shadows
The box-shadow property takes up to four lengths followed by a colour, and the order never changes: horizontal offset, vertical offset, blur radius, spread radius. The two offsets move the shadow away from the element, with positive values pushing right and down. Blur controls how soft the edge is, where zero produces a hard-edged copy of the shape. Spread is the least understood of the four: it grows or shrinks the shadow before the blur is applied, so a negative spread pulls the shadow in and is the usual trick for a tight, contained shadow under a card. Adding the inset keyword at the start draws the shadow inside the element instead of outside.
The most common mistake is using a single shadow with a large blur and high opacity, which reads as a grey smudge rather than depth. Real shadows are not uniform: the area closest to an object is small, dark and sharp, while the outer falloff is large, faint and soft. You reproduce that by stacking two or three layers — a tight one with a small offset and low blur, plus a wider one with a large blur and lower opacity. Material Design popularised this pairing and almost every mature design system now ships shadows as multi-layer tokens for exactly this reason.
Colour matters as much as geometry. Pure black at high opacity looks muddy over anything other than white, because it desaturates whatever sits beneath it. A more convincing approach is a very low opacity black, typically between 8 and 25 percent, or better still a dark tint of the surface colour underneath. On a blue-tinted interface, a navy shadow reads as natural where a black one reads as dirty. Keeping the light source consistent matters too: if one card casts its shadow downward, every card on the page should, which in practice means a positive vertical offset and a horizontal offset of zero almost everywhere.
Inset shadows solve a different set of problems. They are the standard way to make an input field, a well, or a pressed button look recessed, and a subtle inset shadow at the top of a scrollable container is a common way to hint that content continues above. Neumorphism, the soft-UI style that had a moment a few years ago, is built almost entirely from paired shadows: a light one from the top left and a dark one from the bottom right, both matched closely to the background colour. It looks striking but is genuinely difficult to make accessible, because the contrast between an element and its background is by design almost nothing.
On performance, box-shadow is cheap in normal use and expensive in a few specific situations. Static shadows are painted once and cost nothing thereafter. Problems appear when you animate a shadow, since each frame forces a repaint, and when very large blur radii are applied across many elements at once. If you need a shadow that changes on hover, animating opacity on a pseudo-element that carries the shadow is far smoother than animating box-shadow directly. It is also worth knowing that box-shadow follows the border box, so for an irregular shape or a transparent PNG you want filter with drop-shadow instead, which follows the alpha channel.
Pair this with our Color Palette Generator to derive shadow tints from your brand colours, the CSS Gradient Generator for surfaces, and the Flexbox Generator for the layout around them.
Frequently Asked Questions
What does each box-shadow value mean?
The syntax is horizontal offset, vertical offset, blur radius, spread radius, then colour, always in that order. The horizontal offset moves the shadow right when positive and left when negative. The vertical offset moves it down when positive and up when negative. The blur radius controls edge softness, where zero gives a hard-edged duplicate of the shape and larger values fade it out. The spread radius grows or shrinks the shadow before the blur is applied. Adding the keyword inset at the start of the declaration draws the shadow inside the element instead of outside it.
What is the spread radius actually for?
Spread resizes the shadow shape before any blur is applied, so a positive value makes the shadow larger than the element and a negative value makes it smaller. The most useful case is negative spread, which pulls a soft shadow tightly under a card so it does not bleed out to the sides, producing the contained lift that most modern card designs use. Positive spread with zero blur creates a solid outline, which is a cheap way to draw a border that does not affect layout. It is the least used of the four values and the one that most often fixes a shadow that looks wrong.
Why do multiple shadow layers look better than one?
Because real shadows are not uniform. The area of shadow closest to an object is small, relatively dark and fairly sharp, while the outer falloff is much larger, much fainter and very soft. A single box-shadow can only express one of those, so it ends up looking like a grey blur. Stacking two or three layers reproduces the falloff: a tight layer with a small offset and low blur for the contact shadow, plus a wide layer with a large blur and low opacity for the ambient one. Every mature design system ships shadows as multi-layer tokens for this reason.
When should I use inset shadows?
Whenever you want something to look recessed rather than raised. The standard cases are form inputs and text areas, which read as wells you can type into; pressed or active button states, where an inset shadow makes the button feel pushed in; progress tracks and sliders; and a subtle inset at the top of a scrollable panel to hint that content continues above. Inset shadows are also half of the neumorphic look, which pairs a light inset from one corner with a dark one from the opposite corner. Keep the blur and opacity low, since inset shadows read as heavy much faster than outer ones.
What is neumorphism and should I use it?
Neumorphism, or soft UI, is a style where elements appear extruded from the background rather than floating above it. It is built from two shadows on the same element, a light one from the top left and a dark one from the bottom right, both very close in colour to the background. It looks distinctive, but it has a genuine accessibility problem: the whole effect depends on the element and its background being nearly the same colour, which means contrast is inherently minimal and boundaries can be invisible to users with low vision. Use it decoratively if you like it, but do not rely on it alone to communicate that something is interactive.
When should I use filter drop-shadow instead of box-shadow?
The difference is what the shadow follows. box-shadow always follows the element border box as modified by border-radius, so it is rectangular even when the visible content is not. filter with drop-shadow follows the actual alpha channel, so it wraps the real silhouette of a transparent PNG, an SVG icon, or a clip-path shape. If you are shadowing a card, a button or an input, box-shadow is correct and cheaper. If you are shadowing a logo with transparency, an irregular illustration or a clipped shape, drop-shadow is the one you want. Note that drop-shadow takes no spread value.
Do box-shadows hurt performance?
Rarely, and only in specific conditions. A static shadow is painted once and then cached, so the ongoing cost is effectively zero no matter how many elements carry one. Two things do cost real frames: animating box-shadow, because every frame triggers a repaint of the blurred region, and very large blur radii applied across many elements simultaneously, which is expensive on lower-powered devices. If you need a shadow to change on hover or focus, the smooth approach is to put the shadow on a pseudo-element and animate its opacity, since opacity is compositor-driven and does not force a repaint.
Is box-shadow supported everywhere?
Yes. Unprefixed box-shadow has been supported in every browser since roughly 2011, including multiple comma-separated layers, the inset keyword, negative spread and rgba colours. There is no need for -webkit- or -moz- prefixes in any browser in current use, which is why this tool does not emit them. The only modern caveat is that box-shadow respects border-radius, so if you change an element radius the shadow follows it automatically, and that shadows are drawn outside the border box and do not affect layout or take up space in the document flow.