Box Shadow

Syntax: box-shadow offset-x offset-y blur-radius spread color. offset-x and offset-y set the shadow offset, blur-radius sets the blur, spread expands or contracts the shadow, and color sets the color (can include alpha). The optional inset parameter draws the shadow inside the element.

List shadows separated by commas: box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.2). The first shadow appears above the others. Combine a nearby soft shadow with a distant blurred one to add depth.

box-shadow follows the element’s box model (a rectangle), while drop-shadow follows the shape of the content, including transparent areas. drop-shadow is suitable for transparent PNGs; box-shadow is suitable for cards and buttons with clear edges.

inset draws a shadow inside an element, creating a pressed-in effect or an inner border. Useful for pressed buttons, input fields, and cards with recessed content. With inset, the Y offset is usually positive.

One or two shadows on an element usually cause no problems. Many shadows on many elements (for example, in long lists) can burden compositing. For animations, prefer transform over animating box-shadow, which triggers repainting.