How to Add Shadow in CSS

box-shadow creates a shadow around the element's bounding box (rectangle). drop-shadow follows the actual shape of the element, including transparent areas. Use drop-shadow for PNG images with transparency or SVG icons.

Separate multiple shadows with commas. For example: box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1); This creates layered shadow effects.

Adding 'inset' keyword creates an inner shadow (inside the element) instead of an outer shadow. Useful for pressed button effects or input fields: box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);