CSS box-shadow Property

Theory & Explanation

box-shadow is a CSS property that adds shadow effects around an element's frame. It can create depth, highlight elements, and add visual interest. You can apply multiple shadows, control their color, blur, spread, and even make them appear inside the element (inset).

The box-shadow property is not limited to rectangles—when used on elements with border-radius (such as circles or rounded cards), the shadow follows the shape of the element, enabling effects like glows, soft drop shadows, and even simulating natural phenomena like a lunar eclipse. Shadows can be layered for realism, and inset shadows can create the illusion of depth within the element itself. Experimenting with color, blur, and spread can help you achieve subtle or dramatic effects, making box-shadow a versatile tool for modern UI design.

• Syntax: box-shadow: h-offset v-offset blur spread color [inset];
• h-offset: Horizontal shadow position (required)
• v-offset: Vertical shadow position (required)
• blur: Blur radius (optional, default: 0)
• spread: Size of the shadow (optional, default: 0)
• color: Shadow color (optional, default: current color)
• inset: Changes shadow from outer to inner (optional)

Multiple shadows can be added by separating each with a comma. Shadows are rendered front-to-back (first is on top).