How to use Box shadow generator
- 1
Choose a starting shadow
Click a preset such as Soft, Layered or Elevation 2, or adjust the default layer.
- 2
Shape each layer
Select a layer and set its X and Y offset, blur, spread, colour, opacity and inset.
- 3
Check it on your surface
Change the box size, corner radius and colours to match the element you are styling.
- 4
Copy the CSS
Copy the box-shadow declaration or the Tailwind class into your code.
Limits and Pro
Free with no sign-up: unlimited layers, offsets from −100 to 100 px, blur up to 200 px and 12 shadow presets.
Pro removes the ads; the shadow editor is complete on every plan. See Pro
About Box shadow generator
The CSS box-shadow property takes a list of layers, each with a horizontal and vertical offset, a blur radius, a spread distance, a colour and an optional inset keyword. Getting depth that looks natural means balancing all of those across two or more layers, which is hard to do by editing numbers in a stylesheet. This editor shows the result on a live preview box while you drag sliders, and writes the declaration and a Tailwind shadow-[…] class for you.
Add as many layers as you like, hide one temporarily to compare, move it up or down — the first layer in the list is drawn on top — or switch it to inset for pressed buttons and input fields. Offsets range from −100 to 100 pixels, blur up to 200 pixels and spread from −100 to 100, and every colour has its own opacity. Negative spread is the trick behind modern soft shadows: it pulls the shadow in under the element so only a gentle glow shows below it.
The preview box can be resized and given any corner radius, box colour and background colour, so you can judge the shadow on the actual surface of your design, including dark themes where shadows need more opacity or a coloured glow.
Twelve starting points are included: four Material Design elevation levels, a soft single layer, a five-layer smooth shadow, a hard neubrutalist offset, neumorphism, an inner shadow, a coloured glow, a focus-style outline ring and a floating card. Gradients are in the other tab; text shadows and the drop-shadow() filter aren't covered.
Privacy
The shadow is built and previewed entirely in this page, and your layers are saved only in this browser's local storage so they survive a reload. No settings or designs are sent to a server.