About the Box Shadow Generator
The box-shadow syntax is [inset] x-offset y-offset blur spread color. Positive x moves the shadow right and positive y moves it down. Blur softens the edge (it cannot be negative), and spread grows or shrinks the shadow before blurring. A negative spread combined with a large blur is the usual trick for soft shadows that do not leak out the sides.
Several shadows can be combined with commas; the first one is drawn on top. Realistic elevation usually pairs a tight, darker shadow for contact (0 2px 6px) with a wide, faint one for ambient light (0 10px 30px -8px). Using a dark, slightly tinted color at low opacity looks more natural than pure black.
inset draws the shadow inside the border for pressed buttons or wells. Box shadows follow border-radius and do not affect layout. For shadows that follow transparent PNG shapes, use filter: drop-shadow() instead. Test the result on both light and dark page colors, since a shadow that reads well on white often disappears on a dark theme.
How to use it
- Select a layer or add a new one.
- Move the sliders for offset, blur, spread and opacity, and pick a color.
- Tick Inset for an inner shadow.
- Change page and box colors or border radius to test the look.
- Copy the generated CSS.