Box shadow generator
Layered shadows with a live preview, output as CSS or Tailwind.
FreeRuns in your browserNo signupUpdated 2026-10-29
Preview
.card {
box-shadow:
0px 1px 2px 0px rgb(15 23 42 / 8%),
0px 8px 24px -4px rgb(15 23 42 / 14%);
}shadow-[0px_1px_2px_0px_rgb(15_23_42_/_8%),0px_8px_24px_-4px_rgb(15_23_42_/_14%)]
Stacking a tight dark layer under a wide soft one looks more natural than a single large blur.
About this tool
How it works and how to read the result.
Need this done for you?
Website design & development
Company websites designed and built to win trust and enquiries.
See the serviceWhat it does
A box shadow generator lets you tune a shadow by eye instead of guessing numbers. Add up to four layers, set offset, blur, spread, colour and opacity on each, and watch a card in the preview respond. The result comes out as a multi-line CSS rule and as a Tailwind arbitrary value, so it drops into either kind of project. The presets give a soft two-layer shadow, a flat offset, a floating card and an inset for pressed states.
How to use it
- Pick a preset that is close to what you want, or start from the default.
- Click a layer to expand it and move the sliders. Keep an eye on the preview.
- Add a second layer if the shadow looks flat; make the first one tight and dark, the second wide and faint.
- Copy the CSS or the Tailwind class.
How to read the result
The default produces two layers: 0 1px 2px 0 rgb(15 23 42 / 8%) and 0 8px 24px -4px rgb(15 23 42 / 14%). The first is the contact shadow, one pixel down with two pixels of blur, so it looks like the card is resting on the page. The second is the ambient shadow, eight pixels down with a wide 24px blur. The negative four pixel spread pulls it in so it does not poke out past the sides of the card, which would look like a halo.
Opacity is where most shadows go wrong. Values between 6% and 16% look like light falling on paper. Above 30% the effect reads as a dark smudge, unless the design is deliberately heavy. Using a dark blue such as #0f172a instead of pure black keeps the shadow in tune with the page colours.
The Tailwind line swaps spaces for underscores so the whole value fits inside shadow-[...]. Paste it as a class; Tailwind v4 reads it without any config.
Round the card's corners to match with the border radius generator. For a full interface, see website design and development.
Questions
Frequently asked.
What do the four numbers in box-shadow mean?
In order they are horizontal offset, vertical offset, blur radius and spread. Positive offsets move the shadow right and down. Blur softens the edge; zero gives a hard edge. Spread grows the shadow in every direction before blurring, and a negative spread shrinks it so it hides behind the box.
Why use more than one shadow layer?
Real objects cast a small sharp shadow close by and a large soft one further out. One big blurred layer looks flat and smeary. A tight layer with 1 to 2px of blur under a wide layer with 20 to 30px of blur gives depth that reads as natural.
Does box-shadow slow pages down?
Static shadows cost almost nothing. Animating the shadow itself on hover makes the browser repaint it every frame, which can stutter on large cards. Animate opacity on a pseudo-element that holds the shadow instead, so the browser only composites.
Your next move
Like what you see? Tell us about it.
A process that takes too long, a website that undersells you, or an idea ready to take shape. Tell us where you are and we will suggest a useful next step.
India · Working with clients worldwide