CSS box shadow generator
Free · Runs in your browser · Updated 26 September 2026
CSS box shadow generator
Layers
Layer 1 (on top)
Preview and code
CSS
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);Tailwind class
shadow-[0_4px_12px_rgba(0,0,0,0.25)]1 shadow layer.
The syntax
Each layer is five values.
One layer
| Part | What it does |
|---|---|
| x-offset, y-offset | How far the shadow moves right and down. Negative values move it left and up. |
| blur | How soft the edge is. It cannot be negative. |
| spread | Grows (positive) or shrinks (negative) the shadow before blurring. Optional. |
| color | Usually a black or tinted colour with low opacity, written as rgba(). |
| inset | Puts the shadow inside the box. Optional, and it goes first. |
Several layers are separated by commas, and the first layer is painted on top. Layered shadows often look more natural than one heavy one: a tight, faint shadow close to the surface plus a wider, fainter one for depth.
Tailwind
As an arbitrary value.
The Tailwind class is shadow-[…] with underscores in place of spaces and no spaces inside rgba(). The classes this tool prints were built with Tailwind 3.4’s own engine, and the shadow it generated matched the one shown in the CSS output for one layer, inset and multiple layers, negative offsets and a coloured shadow.
- Big blurs on many elements, or shadows that animate, can be costly for the browser to paint. Keep them for the elements that need them.
- Do not rely on a shadow alone to show that something is a button or a card: some people cannot see faint shadows, and forced-colours modes remove them.
FAQ
Questions people ask first.
- What is the difference between blur and spread?
- Blur softens the edge of the shadow: 0 gives a hard edge and larger values fade it out. Spread grows or shrinks the shadow before it is blurred: positive spread makes it bigger than the box, negative makes it smaller.
- How do I put a shadow on one side only?
- Offset the shadow toward that side and shrink it with a negative spread so it does not show on the others. For a bottom shadow: box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.4).
- What does inset do?
- It draws the shadow inside the box instead of outside, as if the surface were pressed in. Offsets then move the shadow within the box.
- How do I use the result in Tailwind?
- Paste the class into your markup, for example shadow-[0_4px_12px_rgba(0,0,0,0.25)]. Tailwind arbitrary values use underscores for spaces and no spaces inside rgba(). The generator writes it that way for you.
- When should I use filter: drop-shadow instead?
- box-shadow follows the element’s rectangular box (with its rounded corners). drop-shadow follows the shape of what is actually drawn, so it suits transparent images and clipped elements.
From the team behind the tools
Building a product?
Daniotech builds web, mobile and real-time software for startups and teams. Tell us what you are making and who it is for.