box-shadow
Adds shadow effects around an element's frame. It can be used to create depth, elevation, or subtle glows.
Quick example
.card {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
/* x-offset y-offset blur spread color */
}Quick facts
Initial value
noneInherited
No
Applies to
all elements
Animation type
shadowList
Values
none box-shadow Browser Support
Widely available Since 2015 96% global usage
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2015.
Safe to use without fallbacks.
10+
4+
5.1+
12+