The box-shadow property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread radius, and color.
Example 1: Basic Box Shadow
.basic-shadow {
/* Applies a black shadow offset by 5px horizontally and vertically, with a 10px blur */
box-shadow: 5px 5px 10px black;
width: 150px;
height: 100px;
background-color: #f0f0f0;
}
Explanation: This code adds a simple shadow to a div. The first two values set the horizontal and vertical offsets, and the third value defines the blur radius, creating a soft, diffused shadow.
Example 2: Inset Shadow
.inset-shadow {
/* Creates an inner shadow with a gray color, giving a pressed-in look */
box-shadow: inset 0 0 10px #888888;
width: 150px;
height: 100px;
background-color: #f0f0f0;
}
Explanation: The inset keyword changes the shadow from an outer shadow to an inner one. This makes the shadow appear inside the element's border, giving it a sunken appearance.
Example 3: Multiple Shadows
.multiple-shadows {
/* Layering two shadows: a red one on top and a blue one underneath */
box-shadow: 5px 5px 10px red, -5px -5px 10px blue;
width: 150px;
height: 100px;
background-color: #f0f0f0;
}
Explanation: You can apply multiple shadows to a single element by separating each shadow's values with a comma. The first shadow in the list appears on top.
Example 4: Shadow with Spread Radius
.spread-shadow {
/* A shadow with a 5px spread radius, making the shadow larger */
box-shadow: 0 0 10px 5px #666;
width: 150px;
height: 100px;
background-color: #f0f0f0;
}
Explanation: The fourth value in box-shadow is the spread radius. A positive value expands the shadow, making it larger than the element itself.
Example 5: Neumorphic Shadow Effect
.neumorphic-shadow {
/* Creates a soft, extruded look with two shadows on opposite corners */
box-shadow: 5px 5px 10px #bebebe, -5px -5px 10px #ffffff;
width: 150px;
height: 100px;
background-color: #e0e0e0;
border-radius: 10px;
}
Explanation: Neumorphism uses a light and a dark shadow to create a soft, UI look. The key is to have the background color sit between the two shadow colors.
Example 6: Shadow on a Pseudo-element
.pseudo-element-shadow::before {
/* Adds a shadow to a pseudo-element for a subtle lifting effect */
content: "";
position: absolute;
top: 50%;
left: 5%;
width: 90%;
height: 20px;
box-shadow: 0 15px 10px rgba(0, 0, 0, 0.4);
z-index: -1;
transform: rotate(-3deg);
}
Explanation: This code applies a box-shadow to a ::before pseudo-element. This technique is useful for creating more complex, non-rectangular shadow shapes.
Example 7: Glowing Effect Shadow
.glowing-shadow {
/* Creates a vibrant blue glow around the element */
box-shadow: 0 0 20px 5px #00aaff;
width: 150px;
height: 100px;
background-color: #333;
border-radius: 5px;
}
Explanation: By using a bright color for the shadow and a generous blur and spread radius, you can create a glowing effect. This is often used on dark backgrounds to make elements pop.