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
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);
}
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);
}
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);
}
filter
: This property applies visual effects like blurring and color shifting to an element. Thedrop-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));
}