Color & CSS
CSS Box Shadow Generator
box-shadow: 0 4px 16px 0 rgb(0 0 0 / 12%);
Shape a shadow with sliders and see it on a box straight away. Stack layers for realistic depth, then copy the CSS.
How to use this tool
Start with a preset (Soft, Layered, Sharp, Neon, Inset or Long), or adjust Layer 1.
For each layer, set the horizontal and vertical offset, blur, spread, opacity and color, and tick inset for a shadow inside the box. Add a layer stacks another one, and Remove layer takes one away. Box color, Background color and Box corner radius change only the preview.
Check the live preview, use Reset to start again, and press Copy CSS when it looks right.
How to use this tool
Start with a preset (Soft, Layered, Sharp, Neon, Inset or Long), or adjust Layer 1.
For each layer, set the horizontal and vertical offset, blur, spread, opacity and color, and tick inset for a shadow inside the box. Add a layer stacks another one, and Remove layer takes one away. Box color, Background color and Box corner radius change only the preview.
Check the live preview, use Reset to start again, and press Copy CSS when it looks right.
Was this tool helpful?
Suggest an improvementHelp keep ConduitTools free
Every tool here is free, private and built by a solo developer. If this one saved you time, a small tip keeps the site running and new tools coming.
Up to five shadow layers, tuned against your own colors.
One hard shadow rarely looks real. Layering a few soft ones, each a little larger and fainter, is how modern interfaces get convincing depth.
- Up to five layers
- Stack shadows and adjust each one independently, or start from a preset such as Soft, Layered, Neon, or Long.
- Every property
- Horizontal and vertical offset, blur, spread, color, opacity, and inset, with exact number entry beside every slider.
- Preview on your colors
- Set the box and background colors to match your design, because a shadow that works on white can vanish on a dark card.
Frequently asked questions
What is the difference between blur and spread?
Blur softens the shadow's edge. Spread grows or shrinks the shadow before the blur is applied, so a negative spread keeps a shadow tucked under the box.
What does inset do?
It draws the shadow inside the box instead of outside, which makes the surface look pressed in. It is useful for inputs and wells.
Why use several layers?
Real shadows are soft near the object and softer further away. Two or three layers with growing blur and low opacity look far more natural than one heavy shadow.
Do shadows affect performance?
A few are fine. Very large blur radii on many elements, or on elements that animate, can be costly, so keep blur moderate where it matters.