CSS Box Shadow Generator

How to use CSS Box Shadow Generator

1. Set the X and Y offsets, blur and spread while watching the preview.
2. Pick a shadow colour — start from black at low opacity.
3. Add a second and third layer for depth: tight and dark first, wide and faint last.
4. Toggle inset for a recessed effect, then copy the generated CSS.
5. Multiple shadows are comma-separated; the first in the list is drawn on top.
6. A negative spread shrinks the shadow, which is how you get a soft shadow only beneath an element.
7. box-shadow follows the element’s border-radius automatically — no extra work for rounded cards.

What the four numbers do

The first two are the horizontal and vertical offset: where the shadow sits relative to the element. The third is blur radius, how soft the edge is — zero gives a hard-edged duplicate. The fourth is spread, which grows or shrinks the shadow before blurring; a negative spread pulls the shadow in, which is the trick for a shadow that appears only below an element rather than haloing all four sides. Inset draws the whole thing inside the border instead, for a recessed or pressed look.

One shadow looks fake; three look real

Physical shadows are not one uniform smear. Light comes from multiple directions and bounces, producing a tight dark contact shadow directly under the object and a wide faint one further out. That is why a single 0 4px 24px rgba(0,0,0,0.4) reads as a graphic effect, while stacking a small tight layer, a medium layer and a large diffuse one reads as depth. Shadows are drawn in order with the first on top, so put the tightest layer first.

Keep them dark, transparent and subtle

The most common mistake is a shadow that is too opaque and too grey. Real shadows are not grey, they are the background colour darkened, so a black shadow at low alpha (0.05 to 0.15) layered up beats a solid #888 every time. Tinting the shadow toward your background’s hue is better still. And keep the vertical offset larger than the horizontal unless you are modelling a specific light source — interfaces conventionally light from above.

Performance and the alternatives

Box-shadow is cheap to paint once and expensive to animate, because changing it repaints the element on every frame. To animate a hover lift, transform the element and cross-fade between two pre-rendered shadow layers rather than animating the shadow values. For shadows that follow an element’s transparency — an icon or a PNG with a cut-out — box-shadow will square it off; use filter: drop-shadow() instead, which traces the alpha channel.