What is CSS Box Shadow?
The CSS box-shadow property adds shadow effects around an element's frame. It can create depth, elevate elements, and add visual interest to your designs. A well-crafted box shadow can transform a flat interface into a polished, professional one.
Box Shadow Syntax
The full syntax is: box-shadow: offset-x offset-y blur-radius spread-radius color inset. Each parameter controls a different aspect of the shadow: the horizontal and vertical offset determine direction, blur radius softens the edges, spread radius expands or contracts the shadow, and colour defines its tint.
Layering Multiple Shadows
Separate multiple shadows with commas to create complex effects. For example, a subtle hover effect uses two shadows: a small, tight shadow close to the element and a larger, softer shadow further away. The combination creates a realistic elevation effect.
Use Our Generator
Try our free box shadow generator to create, preview, and export CSS box shadows visually.