How to use it
- Pick a preset (soft, layered, floating card, retro, inner, neumorphic, glow), or start with the default.
- Set the horizontal and vertical offset, blur, spread, color and opacity.
- Add layers; each one is editable on its own.
- Copy the CSS or the Tailwind class.
The four numbers of box-shadow
box-shadow: 0 10px 30px -8px rgb(15 23 42 / 0.35);
| Value | What it does |
|---|---|
| 0 | horizontal offset (positive = right) |
| 10px | vertical offset (positive = down) |
| 30px | blur: bigger is softer |
| -8px | spread: negative makes it smaller and more “floating” |
The inset keyword makes an inner shadow, so the box looks pressed in.
Why layer shadows?
Real shadows are dark and sharp close to an object and light and blurry farther away. One layer can't do that. The layered smooth preset stacks five progressively larger, fainter shadows, and that's what makes a card look natural.
Layers are separated by commas, with the first one on top. Performance isn't a concern: modern browsers paint box-shadow on the GPU.
Tailwind and sharing
Instead of Tailwind's built-in shadows (shadow-md, shadow-xl), you get an exact arbitrary-value class like shadow-[0_10px_30px_-8px_rgb(15_23_42_/_0.35)], plus the border radius.
Share your settings with a link; the part after the # never reaches our server.
Frequently asked questions
How do I add a shadow to a div in CSS?
Use the box-shadow property: offset, blur, spread and color. This generator writes the code.
What's the difference between box-shadow and drop-shadow?
box-shadow follows the box's rectangle; filter: drop-shadow() follows the actual shape, such as a transparent PNG.
How do I make an inner shadow?
Turn on the inset checkbox for that layer.
How many layers can I stack?
Up to eight here. CSS has no limit, but eight is plenty.