CSS box-shadow


CSS box-shadow is a powerful tool for creating dynamic, eye-catching visual effects on web pages. It allows developers to add drop shadows, inner shadows, and other visual effects to elements on a webpage. Box-shadow is a part of the CSS3 specification and is supported by all modern web browsers.

Box-shadow is a simple way to add depth and dimension to a webpage. It can be used to create subtle visual effects, such as adding a drop shadow to text, or to create more dramatic effects, such as adding a 3-dimensional look to a button. The syntax for the box-shadow property is relatively simple and allows developers to easily control the size, color, and position of the shadow.

The box-shadow CSS property adds shadow effects around an element’s frame.

Property Values:

  • Offset-X Offset-Y: These are two <length> values to set the shadow offset. <offset-x> specifies the horizontal distance. <offset-y> specifies the vertical distance.
  • Blur-radius: The larger this value, the bigger the blur, so the shadow becomes bigger and lighter.
  • Spread-radius: Positive values will cause the shadow to expand and grow bigger, and negative values will cause the shadow to shrink.
  • Color: For the set color of the shadow.
  • Global keywords:| inset |initial | inherit;
    /* offset-x | offset-y | blur-radius | spread-radius | color */
    box-shadow: 2px 2px 2px 1px blue);