How to use the CSS Box Shadow Generator
- 1. Start from a presetSoft card, Material, Layered, Glow, Inset or Neumorphic, or build your own.
- 2. Adjust each layerSet horizontal and vertical offset, blur, spread, colour and opacity; add or remove layers.
- 3. Get the CSSCopy the box-shadow rule or the Tailwind arbitrary class.
What each value does
A shadow is written as x y blur spread colour. The two offsets move it right and down (negative values move it left and up). Blur softens the edge, and spread grows or shrinks the shadow before blurring; a negative spread tucks the shadow under the box, which is how soft card shadows avoid a grey halo on the sides. inset draws the shadow inside the box instead. Your code is processed in your browser and never uploaded.
Real objects cast more than one shadow: a tight, darker one close to the surface and a wide, faint one further out. Stacking two to five layers, separated by commas, gives that depth. The Layered preset doubles the offset and blur at each step with a low opacity, a common way to get smooth, natural shadows.
Worked example
The default Soft card preset is one layer: 0px across, 10px down, 30px blur, −8px spread, in navy #0f172a at 25% opacity. The tool writes box-shadow: 0px 10px 30px -8px rgba(15, 23, 42, 0.25); and the Tailwind class shadow-[0px_10px_30px_-8px_rgba(15,23,42,0.25)], where underscores stand in for spaces as Tailwind requires.
Tips
- Shadows look best tinted with the page's dark colour rather than pure black.
- Neumorphic shadows need the box and the background to be the same colour; the preset sets both.
- Large blurs on hundreds of elements can slow scrolling on older phones, so keep heavy shadows for a few key cards.
Frequently asked questions
Does box-shadow affect layout?
No. Shadows are painted outside the box without taking up space, so nothing around them moves.
Why is opacity separate from colour?
So you can pick a colour with the colour picker and fade it independently; the output uses rgba().
Is the box shadow generator free?
Yes. You can open the box shadow generator, paste code and change every setting without signing up. When you get the CSS for the first time, we ask once for your name and WhatsApp number; after that it, and every other Uncodemy tool, opens straight away.