🌥️ CSS Box Shadow Generator
Adjust the sliders to shape a box-shadow, then copy the finished CSS.
How the rule is assembled
The seven controls are concatenated in the order CSS expects, and the colour picker's hex is split into its three byte pairs and rejoined with the opacity as an alpha value:
box-shadow: [inset] <x>px <y>px <blur>px <spread>px rgba(r, g, b, a)
#000000 at 25% -> rgba(0, 0, 0, 0.25)
#3366ff at 40% -> rgba(51, 102, 255, 0.40)The alpha is the percentage divided by 100 and fixed to two decimals, so 25 becomes 0.25 and 33 becomes 0.33. Opacity is clamped to 0-100 and blur to zero or above; the two offsets and the spread accept negatives, which is what the default -5px spread uses to pull the shadow in slightly narrower than the box.
What each number does
- Horizontal and vertical offset move the shadow right and down. Positive Y with X at 0 reads as light from directly above, which is what most interface shadows want.
- Blur is the softness of the edge; 0 gives a hard-edged copy of the box.
- Spread grows or shrinks the shadow before blurring. Negative spread keeps a large blur from spilling out sideways.
- Inset flips the shadow to the inside, which is how pressed buttons and inner wells are made.
Frequently asked questions
What is the difference between blur and spread in box-shadow?
Spread resizes the shadow shape itself before any softening; blur fades its edge outward. A 30px blur with -5px spread is a soft shadow drawn from a box 5px smaller than the element.
How do I make a soft, subtle drop shadow?
Keep the horizontal offset at 0, put the vertical offset around a third of the blur, and hold opacity near 10-25%. The default 0px 20px 30px -5px black at 25% is that shape.
Why does my box-shadow not show on the inside of the element?
The inset keyword is missing. Without it the shadow is painted outside the border box, where a parent with overflow hidden can also clip it away.