CSS Shadow Generator: A Practical box-shadow Parameter Handbook
A CSS shadow generator gives you sliders and colour pickers instead of a blank declaration you have to guess at. This handbook explains what each box-shadow value actually does, so you can build a shadow in a browser tool and then read, edit and reuse the CSS it produces. No framework required, no build step.
You can follow along in any browser-based tool or in your own editor. Everything here is plain CSS.
What box-shadow Actually Controls
The box-shadow property draws a shadow behind an element's border box. It does not affect layout, so a large shadow never pushes neighbouring content around. That is the main reason it is safe to experiment with.
The property takes two to six values, in a fixed order. If you get the order wrong, the browser may drop the whole declaration silently. That is the most common reason a shadow "doesn't work".
- offset-x — horizontal distance. Positive moves the shadow right.
- offset-y — vertical distance. Positive moves it down.
- blur-radius — how soft the edge is. Zero gives a hard edge.
- spread-radius — grows or shrinks the shadow before blurring. Optional.
- colour — any valid CSS colour, including alpha values.
- inset — draws the shadow inside the element. Optional.
You can also stack several shadows in one declaration by separating them with commas. The first shadow in the list paints on top.
Offset Values Set Direction
Offset-x and offset-y are lengths, so px, rem and em all work. Keeping both at zero centres the shadow behind the element, which is what you want for a soft ambient glow.
A small positive offset-y with a larger blur reads as a light source above the element. Negative offset-y puts the light below. Pick one direction and stay consistent across a page — mixed light directions look wrong even when nobody can say why.
Blur Radius Sets Softness
Blur radius controls how far the shadow colour fades out. It is not a distance the shadow travels; it is a gradient applied around the shadow's edge.
Doubling the blur roughly doubles the visible softness. Beyond about 40px on a small element, the shadow spreads so far that it stops reading as a shadow and starts reading as a stain.
Spread Radius Sets Size
Spread radius is the value most people skip. A positive spread expands the shadow in every direction before the blur is applied. A negative spread contracts it.
Negative spread is the trick behind tight, realistic shadows. It pulls the shadow in so the blur does not leak out past the element's sides.
Colour and Transparency
Any CSS colour works, but shadows almost never look right at full opacity. Black at 100% reads as a hard grey smear. Most interface shadows sit somewhere between 5% and 25% alpha.
Colour also carries meaning. A shadow tinted slightly toward the element's own hue looks more natural than neutral black, especially on coloured buttons and cards.
The inset Keyword
Adding inset flips the shadow to the inside of the box. Offset values then behave in reverse: a positive offset-y that would push an outer shadow down pushes an inner shadow up from the bottom edge.
Inset shadows are useful for pressed states, input fields and subtle inner borders. They cannot be combined with an outer shadow in the same shadow — but you can list both, separated by a comma.
How to Build a Shadow in Six Steps
- Start with a neutral base. Set offset-x to 0 and offset-y to a small value such as 2px. This gives you a downward shadow with a single light source.
- Add blur. Raise the blur radius until the edge stops looking like a hard line. For a small card, that is usually somewhere between 8px and 20px.
- Pull the spread negative. Try -2px or -4px. The shadow tightens and stops bleeding past the element's edges.
- Lower the opacity. Switch the colour to an alpha value and drop it to around 0.1 to 0.2. Compare against a solid black shadow to see the difference.
- Stack a second shadow if you need depth. A tight, darker shadow plus a wide, faint one reads as more realistic than a single large blur.
- Copy the output and test it in place. Paste the declaration into your stylesheet and check it against your real background colour, not a white canvas.
A CSS shadow generator is most useful at steps 2 through 5, where you are comparing values by eye. The tool removes the guesswork from the syntax; the judgement about what looks right is still yours.
How Do You Write a box-shadow Value by Hand?
A box-shadow value is written as offset-x, offset-y, blur-radius, spread-radius and colour, in that order, with inset added at the start or end for inner shadows. Only offset-x and offset-y are required. Any value you omit falls back to zero, and an omitted colour falls back to the current text colour.
That is the whole syntax. Most confusion comes from missing spread radius, which shifts the colour into the position where a length was expected.
/* offset-x | offset-y | blur | spread | colour */
box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.18);
Common Syntax Mistakes
A missing unit is the most frequent error. 0 is fine on its own, but 4 is not a valid length — it needs 4px. The second most common is a stray comma before the colour, which turns a five-value shadow into an invalid six-value one.
Browsers ignore an invalid shadow declaration completely. There is no error in the console. If your shadow vanishes, check the units and the commas first.
Layering Multiple Shadows for Realistic Depth
A single shadow with a large blur looks flat because real light produces both a tight contact shadow and a wide diffuse one. Stacking two or three shadows reproduces that.
Keep the first shadow tight and relatively dark, then add wider, fainter ones. Because the first shadow paints on top, the order matters — reversing the list changes the result.
Three shadows is usually the practical limit. Past that, the rendering cost rises and the visual difference becomes hard to justify.
Elevation Systems and Consistent Shadow Scales
If you use shadows in more than one place, define a small scale instead of inventing values per component. A common approach is four or five levels, from a barely-there resting state to a pronounced overlay state.
Name them by purpose, not by number: a card shadow, a dropdown shadow, a modal shadow. Purpose-based names survive redesigns; shadow-3 does not.
Keep the light direction identical across every level. Vary only the blur, spread and opacity as elevation increases.
Shadows on Dark Backgrounds
Dark interfaces need different treatment. A black shadow on a near-black background is invisible. The usual fix is a lighter, low-opacity shadow, or a subtle border plus a very faint outer glow.
Do not simply raise the opacity of a black shadow on a dark surface. It will read as a smudge rather than depth.
Shadows and Accessibility
Shadows are decoration, not information. If a shadow is the only thing distinguishing a focused element or a raised card, the interface breaks for anyone who cannot perceive it.
Always pair a shadow with a border, a background change or another non-colour cue. Also check contrast ratios for text sitting on a shadowed surface.
Performance and Rendering Notes
Box shadows are painted by the browser and can be expensive on large elements or during animation. Animating box-shadow directly forces a repaint on every frame.
A cheaper approach is to keep the shadow static and animate transform or opacity on the element instead. If you must animate the shadow, keep the blur radius modest and the element small.
Very large blur radii on full-width containers are the worst case. They can cause visible jank on lower-powered devices.
Where a Generator Helps and Where It Doesn't
A generator is excellent for syntax and for fast visual comparison. It is not a design system, and it cannot tell you whether a shadow suits your layout.
It also cannot account for your actual background. A shadow tuned against white will look different against a tinted or photographic background. Always test in context.
Finally, no generator knows your accessibility requirements or your performance budget. Those decisions stay with you.
FAQ
Can I use box-shadow on any element?
Yes. box-shadow applies to any element that generates a box, including inline elements, though results on inline text are rarely useful. It does not apply to elements with display: none, and it does not work on table rows in some older rendering paths, so test if you rely on it there.
Does box-shadow affect layout or spacing?
No. The shadow is painted outside the box model and never changes an element's size or the position of its neighbours. A large shadow can visually overlap adjacent content, but it will not push anything. If you need reserved space, use margin or padding instead.
How many shadows can I stack in one declaration?
There is no practical limit in the specification, but performance and readability set a working ceiling. Two or three shadows cover almost every interface case. Beyond that, the rendering cost rises and the visual difference is usually too small to justify the extra complexity.
Why is my box-shadow not showing up?
The three usual causes are a missing unit on a length, a stray comma, and a shadow colour that matches the background. Check the units first, then the commas, then temporarily raise the opacity to confirm the shadow is being painted at all. An invalid declaration is dropped silently.
Is box-shadow supported everywhere?
Yes, it is widely supported across current browsers. Very old browser versions needed a vendor prefix, and some email clients strip shadows entirely. If you are styling HTML email, treat shadows as optional decoration rather than a load-bearing part of the design.
Wrapping Up
A CSS shadow generator is a syntax shortcut and a comparison tool, not a substitute for understanding the values. Once you know what offset, blur, spread and colour each do, you can read any shadow you find and adjust it with intent.
Start with one light direction, keep a small named scale, and test against your real background. That routine will do more for your interface than any single shadow value.