Skip to main content

The box-shadow Property

The box-shadow property allows you to cast one or more drop shadows from the frame of an element. This property is purely visual; it does not affect the element's size, position, or the flow of surrounding content in the document layout.

It is a powerful tool for enhancing the user interface, creating a sense of depth, lifting elements off the page, and indicating interactivity.


Syntax and Parameters​

The box-shadow property can take multiple values, separated by commas, to create complex, stacked shadows. A single shadow is defined by up to six components:

styles.css
box-shadow: [inset] <offset-x> <offset-y> <blur-radius> <spread-radius> <color>;

1. <offset-x> and <offset-y> (Required)​

These define where the shadow falls horizontally and vertically.

  • Positive offset-x moves the shadow to the right.
  • Positive offset-y moves the shadow down.

The higher the value, the larger and lighter the shadow edge becomes. A value of 0 means the shadow is a sharp, solid shape.

3. <spread-radius> (Optional)​

A positive value increases the size of the shadow uniformly in all directions, and a negative value shrinks it.

The color of the shadow. It's common to use rgba() to include transparency, making the shadow softer and more realistic (e.g., rgba(0, 0, 0, 0.3)).

5. inset (Optional)​

If included, the shadow is drawn inside the element's border, creating an embossed or depressed effect.


Common Shadow Recipes​

1. Basic Drop Shadow​

A subtle, soft shadow that makes the element appear slightly raised.

styles.css
.card {
  /* x: 0, y: 4px, blur: 8px, spread: 0, color: black with 20% opacity */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
}

2. Multi-layered Shadow​

Stacking shadows to create a deeper, more realistic sense of elevation.

styles.css
.elevated {
  box-shadow: 
    /* First, subtle layer for soft general shadow */
    0 1px 3px rgba(0, 0, 0, 0.12),
    /* Second, stronger layer for defined lift */
    0 1px 2px rgba(0, 0, 0, 0.24);
}

3. Inset Shadow​

Creates a feeling that the element is pressed down or concave, often used for input fields or containers.

styles.css
.pressed-input {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

Interactive box-shadow Demo​

Use the live editor to change the values for offset, blur, spread, and color, and toggle the inset keyword to see how the visual depth of the box is altered without changing its size.