CSS Shadow Effects

CSS Shadow Effects are a way to add visual depth and texture to elements on a webpage.

CSS provides four properties to create shadow effects

1. box-shadow: This property adds a shadow to the entire box surrounding an element. It takes values for horizontal offset, vertical offset, blur radius, and spread distance, followed by the color of the shadow.

Example:

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

2. text-shadow: This property adds a shadow to the text inside an element. It takes values for horizontal offset, vertical offset, blur radius, and color of the shadow.

Example:

h1 {
  text-shadow: 2px 2px 2px rgba(0,0,0,0.5);
}

3. inset: This property creates an inset shadow instead of a drop shadow.

Example:

button {
  box-shadow: inset 2px 2px 10px 0px rgba(0,0,0,0.5);
}

4. filter: This property applies visual effects like blurring and color shifting to an element. The drop-shadow() filter function can be used to create a drop shadow effect on an element. It takes values for horizontal offset, vertical offset, blur radius, and color of the shadow.

Example:

img {
  filter: drop-shadow(2px 2px 10px rgba(0,0,0,0.5));
}