CSS Box Shadow Generator
CSS Box Shadow Generator - a browser-based developer tools utility.
Browser tool
About CSS Box Shadow Generator
A box-shadow is four numbers, a colour and an optional inset keyword, and getting a natural-looking result usually means adjusting all of them together and seeing what happens. This builds the shadow visually and hands you the CSS that produces exactly what is on screen. It is free, it is online, and it asks for no email address. The CSS is produced locally as you move the sliders.
How to use it
- Set the offsetHorizontal and vertical offset move the shadow away from the box. A small positive vertical offset with no horizontal offset reads as light from directly above, which is what most interfaces assume.
- Add blur and spreadBlur softens the edge; spread grows or shrinks the shadow before the blur is applied. A negative spread with a large blur gives the tight, diffuse shadow used on cards.
- Stack layers if you need depthReal depth usually comes from two or three shadows at different blurs rather than one heavy one. Add a layer and the generator keeps them in order, because order matters: the first shadow in the list paints on top.
- Copy the CSSThe generated rule is the same value the preview is using, so what you paste renders what you saw.
What each value does
The syntax is offset-x, offset-y, blur-radius, spread-radius, colour, with an optional inset keyword in front. Blur cannot be negative. Spread can be, and negative spread is the usual way to stop a soft shadow spilling out sideways. An inset shadow paints inside the border box instead of outside it, which is how pressed buttons and inner wells are made.
Alpha matters more than colour
A shadow that reads as grey on white will look wrong on a coloured background. Using a dark colour at low alpha rather than a light grey at full opacity lets the surface underneath show through, so the same shadow works on any background.
What it does not do
- A box-shadow follows the border-radius of its element but not the shape of its contents, so it cannot trace a non-rectangular graphic. For that you need filter: drop-shadow().
- Large blur radii on many elements are expensive to paint, and animating a shadow forces repainting on every frame. Animating opacity on a pseudo-element with a fixed shadow is the cheaper technique.
Questions people ask
- Why does my shadow look grey and flat?
- Usually because it is a solid light grey rather than a dark colour at low opacity. Try black at 10-15% alpha with a larger blur; the shadow then tints whatever is underneath instead of sitting on top of it as a grey smear.
- What is the difference between blur and spread?
- Spread changes the size of the shadow shape before it is blurred; blur softens its edge. Increasing spread makes a bigger, equally hard-edged shadow, while increasing blur keeps the size and fades the boundary.
- Can I put a shadow inside the element?
- Yes, with the inset keyword, which the generator can add. Inset shadows are drawn inside the padding box and are how inputs get their subtle recessed look.
Questions about ToolsVerse itself — privacy, cost, what happens to your files — are answered in the frequently asked questions.
Related tools
The tools people most often need alongside CSS Box Shadow Generator.
Can’t find the tool you need?
Tell us what you’re looking for and we’ll consider adding it.