CSS Box Shadow Generator
Create stunning shadows for your elements
Presets
About Box Shadow Generator
Build a CSS box-shadow visually — offset, blur, spread, colour and inset — and copy the finished rule into your stylesheet.
What each value does
The syntax is box-shadow: x y blur spread color. X and Y move the shadow horizontally and vertically. Blur softens the edge; 0 gives a hard edge. Spread grows or shrinks the whole shadow before blurring — a negative spread pulls it in, which is how you make a shadow tighter than its element. Adding inset draws the shadow inside the box instead of outside.
box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.08); — a tight dark one for contact with the surface, and a wide soft one for the cast. A single large blur reads as fog rather than height.Why does my shadow look muddy?
Usually because it is pure black at high opacity. Real shadows take colour from their surroundings, so a shadow tinted toward your background hue at low opacity looks far cleaner. Two subtle layers almost always beat one strong one.
Do shadows cost performance?
Large blur radii are expensive to paint, particularly on mobile and especially when animated. Animating box-shadow directly forces repaints every frame; if you need a hover lift, animate transform and cross-fade a second element carrying the larger shadow instead.