CSS box-shadow Property

CSS box-shadow Property

The box-shadow property in CSS adds shadow effects around an element's frame. This property is commonly used to create depth, focus, and visual hierarchy in designs.

1. Syntax

selector {
  box-shadow: h-offset v-offset blur-radius spread-radius color inset;
}

Value	Description
h-offset	Horizontal offset of the shadow (required). Can be a positive or negative value.
v-offset	Vertical offset of the shadow (required). Can be a positive or negative value.
blur-radius	Optional. Defines the blur effect (higher values give more blur).
spread-radius	Optional. Defines the size of the shadow. Positive values make the shadow larger, and negative values make it smaller.
color	Optional. Defines the color of the shadow. Can use named colors, hex, rgba, etc.
inset	Optional. Changes the shadow from an outer shadow to an inner shadow (creates a "cut-out" effect).

2. Basic Example – Simple Box Shadow

div {
  width: 200px;
  height: 100px;
  background-color: #f1f1f1;
  box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3);
}

✅ This creates a shadow that is 10px to the right and 10px down, with a 15px blur radius, and a semi-transparent black color.

3. Example – Adding Spread Radius

div {
  width: 200px;
  height: 100px;
  background-color: #f1f1f1;
  box-shadow: 10px 10px 15px 5px rgba(0, 0, 0, 0.2);
}

✅ The 5px spread radius increases the size of the shadow beyond its original position.

4. Example – Inner Shadow (inset)

div {
  width: 200px;
  height: 100px;
  background-color: #f1f1f1;
  box-shadow: inset 5px 5px 15px rgba(0, 0, 0, 0.3);
}

✅ The inset keyword creates a shadow inside the element, giving it a "cut-out" look.

5. Example – Multiple Shadows

div {
  width: 200px;
  height: 100px;
  background-color: #f1f1f1;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1), -5px -5px 10px rgba(0, 0, 0, 0.1);
}

✅ Multiple shadows can be applied by separating them with commas. This adds both inner and outer shadow effects.

6. Example – Box Shadow with Color and Blur

div {
  width: 200px;
  height: 100px;
  background-color: #f1f1f1;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.3);
}

✅ A subtle shadow effect with 4px vertical offset, 8px blur radius, and a slight transparency.

7. Best Practices

✔ Use box-shadow sparingly to avoid overwhelming your design with too much emphasis.
✔ Shadows should be used to create depth and highlight elements, such as buttons, cards, and modals.
✔ Keep the shadow color subtle (e.g., using RGBA values) for more natural effects.
✔ Consider adding hover effects by changing the shadow on interaction:

button:hover {
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2);
}