CSS Box-shadow

The CSS box-shadow property allows you to add one or more shadows to an element’s box, creating a three-dimensional effect or adding depth to the design. With box-shadow, you can apply shadows to both block-level and inline elements, such as divs, headings, paragraphs, buttons, and more.

The syntax for the box-shadow property is as follows:

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

• selector: Represents the CSS class or selector of the element to which the box shadow will be applied.
• h-shadow: The horizontal offset of the shadow. A positive value moves the shadow to the right, while a negative value moves it to the left. A value of 0 means the shadow will be centered horizontally.
• v-shadow: The vertical offset of the shadow. A positive value moves the shadow down, while a negative value moves it up. A value of 0 means the shadow will be centered vertically.
• blur: The blur radius of the shadow. A higher value creates a more spread-out and softer shadow. A value of 0 means no blur, resulting in a sharp shadow.
• spread: The spread radius of the shadow. A positive value expands the shadow, while a negative value shrinks it. A value of 0 means the shadow size is the same as the blur size.
• color: The color of the shadow. It can be any valid CSS color value, such as a named color, hexadecimal value, RGB, or HSL value.
• inset: An optional keyword that, when present, creates an inner shadow instead of an outer shadow.

Example:

.box {
  width: 200px;
  height: 100px;
  background-color: #f2f2f2;
  border-radius: 10px;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
}

In this example, the .box class has a gray background with rounded corners (border-radius) and a box shadow applied using box-shadow. The shadow has a horizontal offset of 4px, a vertical offset of 4px, a blur radius of 8px, and the color is a semi-transparent black (rgba(0, 0, 0, 0.2)).

You can use box-shadow to create various effects, such as drop shadows, inner shadows, and 3D effects. By applying multiple box shadows with different colors and offsets, you can achieve more complex and layered effects.

Keep in mind that box-shadow is a CSS3 property and is supported in modern browsers. For compatibility with older browsers, consider providing fallback styles or using a polyfill to ensure graceful degradation.