Shadow CSS

Box shadow css property is a versatile styling tool that creates shadow effects on elements.

Shadows can enhance the visual appeal of web designs, add depth, and create realistic interfaces. From subtle shadowing to dramatic effects, box-shadow provides a wide range of customizations.

What is the box shadow css property ?

The box-shadow property allows developers to apply shadows around the borders of an HTML element. Shadows can vary in size, blur, spread, and color, offering endless creative possibilities.

A shadow can be applied to any block-level or inline-block element, such as <div>, <button>, <img>, or <p>. Transparent or semi-transparent shadows can add realism, while solid shadows can emphasize elements.

Syntax of Box shadow CSS

selector {
  box-shadow: offset-x offset-y blur-radius spread-radius color inset;
}

Offset-X (Required)
The horizontal distance of the shadow from the element. Positive values push the shadow to the right, and negative values move it to the left.

Offset-Y (Required)
The vertical distance of the shadow. Positive values place the shadow below the element, and negative values place it above.

Blur-Radius (Optional)
Determines the softness of the shadow’s edges. A value of 0 results in a sharp edge, while higher values create a more diffused shadow.

Spread-Radius (Optional)
Controls the size of the shadow. Positive values increase the shadow’s size, and negative values shrink it.

Color (Optional)
Specifies the shadow’s color. Accepts color names, hex codes, rgb(), or rgba() for transparency.

Inset (Optional)
Creates an inner shadow instead of an outer shadow when added as a keyword.

Understanding box Shadow CSS Effects

1. Shadow Offsets

Offsets determine the position of the shadow relative to the element

.card {
  background: #FDF7F4;
  height: 100px;
  width: 100px;
  border-radius: 10px;
  box-shadow: 10px 10px;
}

.card {
  background: #FDF7F4;
  height: 100px;
  width: 100px;
  border-radius: 10px;
  box-shadow: 5px 5px 15px;
}

.card {
  background: #FDF7F4;
  height: 100px;
  width: 100px;
  border-radius: 10px;
  box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.2);
}

.card {
  background: #FDF7F4;
  height: 100px;
  width: 100px;
  border-radius: 10px;
  box-shadow: 5px 5px 10px 5px;
}

.card {
  background: #FDF7F4;
  height: 100px;
  width: 100px;
  border-radius: 10px;
  box-shadow: 10px 10px 20px rgba(255, 0, 0, 0.5);
}

Combining Multiple Shadows

You can apply multiple box shadow css to an element by separating them with commas.

.card {
  background: #FDF7F4;
  height: 100px;
  width: 100px;
  border-radius: 10px;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), -5px -5px 15px rgba(255, 255, 255, 0.5);
}

Basic Example

Outer Box shadow css

div {
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
}

Inner Box Shadow CSS

div {
  box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3);
}

Real-World Examples

A. Floating Card

.card {
  background: #FDF7F4;
  height: 100px;
  width: 100px;
  border-radius: 10px;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
}

.card {
  background: #FDF7F4;
  height: 100px;
  width: 100px;
  border-radius: 10px;
  box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.2);
}

.card {
  background: #F5F0CD;
  height: 100px;
  width: 100px;
  border-radius: 10px;
  box-shadow: 0px 0px 15px rgba(255, 0, 0, 0.8);
}

Cross-Browser Compatibility

The box-shadow property is supported in most modern browsers. For older browsers like Internet Explorer 8, use vendor prefixes:

div {
  -webkit-box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3);
  box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3);
}

Performance Considerations

1. Optimize for Performance:
   Overusing shadows can impact rendering, especially on mobile devices.
2. Avoid Large Shadows:
   Excessive blur-radius and spread-radius values can slow down the browser.
3. GPU Acceleration:
   Shadows are GPU-accelerated in modern browsers, ensuring smooth rendering for reasonable values.

Conclusion

The box-shadow property in CSS is a simple yet powerful tool for creating visually appealing web designs. By mastering its syntax and experimenting with various effects, developers can add depth, focus, and realism to elements, enhancing the overall user experience. Whether used for subtle effects or dramatic designs, box-shadow is an essential part of any web developer’s toolkit.

Check our Tailwind UI Components Design