Introduction
The box-shadow property in CSS is instrumental in applying shadow effects to the frame of a specific element. It offers the flexibility to implement multiple effects, which can be distinctly separated using commas. The characteristics of a box shadow are defined by several parameters: X and Y offsets, which are relative to the element itself, the blur and spread radius, and the color.
Values
inset
The optional inset keyword, when present, changes the shadow from an outer shadow (outset) to an inner shadow, effectively embossing the element into the page.
<offset-x>
The <offset-x> specifies the horizontal distance at which the shadow will be shown. Positive values position the shadow to the right of the element.
<offset-y>
The <offset-y> specifies the vertical distance at which the shadow will be shown. Positive values position the shadow below the element.
<blur-radius>
The <blur-radius> value is optional and defines the size of the blur effect for the shadow. The larger the value, the more the edge of the shadow will be blurred.
<spread-radius>
The <spread-radius> is another optional value that controls the size of the shadow. Positive values will cause the shadow to expand and cover more area, while negative values will cause the shadow to contract.
<color>
The <color> value determines the color of the shadow. This can be expressed in any valid CSS color format, such as named colors, hex values, rgb, or rgba for shadows with transparency.