Better shadows with layers
Shadows give depth to cards, buttons, modals and dropdowns. A single box-shadow with a big blur often looks flat or muddy, while the shadows you see in polished interfaces are usually several layers stacked: a tight, darker one near the element and a wider, softer one further away. Writing that by hand means tweaking numbers and reloading over and over.
This generator lets you add as many shadow layers as you want and adjust each one: horizontal and vertical offset, blur, spread, colour, opacity, and inset to put the shadow inside the box. The preview box updates as you move the sliders, and you can change its colour and the background colour so you see the shadow in your real context, light or dark.
Presets give you a starting point: soft, elevated, sharp, inner and a neumorphism-like style. Adjust them to your design and copy the box-shadow: declaration with all the layers in the right order.
Shadows are also a design signal. A small, tight shadow says the element sits just above the page, like a card; a large, soft one says it floats high above, like a modal or a dropdown. Using a few consistent shadow levels across an interface makes the hierarchy easy to read, and the layers you build here can become those levels in your design system or CSS variables. You can keep adding layers and tweaking them until the depth looks right. Everything runs in your browser and the generator is free to use without limits: no sign-up and no Pro needed.
How to create a box shadow
- Start from a preset or from a single layer.
- Adjust offset X and Y, blur, spread, colour and opacity; turn on inset for an inner shadow.
- Add more layers for a more natural depth.
- Set the box and background colours to match your design.
- Click Copy CSS and paste the box-shadow into your stylesheet.
Where to use box shadows
- Cards and tiles that lift on hover.
- Modals, dropdowns and popovers that float above the page.
- Buttons with a pressed (inset) state.
- Input fields with an inner shadow.
- Soft neumorphism-style interfaces.
- Focus rings made with a spread-only shadow.
How box-shadow values work
The order is: inset (optional), offset X, offset Y, blur, spread, colour. For example box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.15). Positive X moves the shadow right, positive Y moves it down. Blur softens the edge and cannot be negative. Spread grows the shadow (positive) or shrinks it (negative); a negative spread with a Y offset keeps the shadow under the element instead of around it. Several shadows are separated by commas and the first one is drawn on top.
Tips for natural shadows
- Use low opacity (0.05 to 0.2) and stack two or three layers.
- Keep offsets vertical: light usually comes from above.
- On coloured backgrounds, tint the shadow with a darker version of the background instead of pure black.
- box-shadow follows border-radius, so rounded cards get rounded shadows.
Frequently Asked Questions
Is the box-shadow generator free?
Yes. The CSS generators are free to use without limits, with live preview and Copy CSS.
How do I make an inner shadow?
Turn on inset for that layer. The shadow is then drawn inside the box instead of outside.
Can I combine several shadows?
Yes. Add as many layers as you like; the CSS lists them separated by commas.
What is the difference between blur and spread?
Blur makes the edge softer; spread makes the whole shadow bigger or smaller before blurring.
Does box-shadow affect layout?
No. Shadows do not take up space or move other elements.