CSS Box Shadow
The CSS box-shadow property is used to add a shadow effect around an HTML element.
Shadows are commonly used to make cards, buttons, containers, navigation elements, and other UI components look visually separated from the page.
What is Box Shadow?
A box normally appears flat on a web page.
When you add a shadow around the box, the shadow creates an impression that the element is slightly raised above the background.
The box-shadow property controls the position, blur, spread, and color of this shadow.
Box shadows are mainly used for visual design. They do not change the actual content of the element.
Basic Syntax
selector {
box-shadow: horizontal vertical blur color;
}Box Shadow Diagram
The shadow appears outside the element.
Simple Explanation
The easiest way to understand box-shadow is to think about a physical card placed on a table.
The card itself is the HTML element. The dark area underneath the card represents its shadow.
CSS allows us to control how far the shadow moves horizontally and vertically, how soft the shadow is, and what color it should have.
Box Shadow Values
| Value | Meaning |
|---|---|
| Horizontal Offset | Moves the shadow left or right. |
| Vertical Offset | Moves the shadow up or down. |
| Blur Radius | Controls how soft or sharp the shadow is. |
| Color | Controls the shadow color. |
| Spread Radius | Controls how much the shadow expands. |
Example 1: Basic Shadow
Here the shadow is moved 8px to the right and 8px downward.
.box {
background-color: lightblue;
padding: 30px;
box-shadow: 8px 8px 10px gray;
}Output
Example 2: Blur Effect
Increasing the blur value makes the shadow softer and less sharp.
.box {
background-color: lightgreen;
padding: 30px;
box-shadow: 5px 5px 15px gray;
}Output
Example 3: Colored Shadow
The shadow color does not have to be gray or black. You can use other CSS colors as well.
.box {
background-color: lightyellow;
padding: 30px;
box-shadow: 5px 5px 10px blue;
}Output
Example 4: Soft Shadow
A shadow can also be placed directly below an element. This is commonly used for modern cards.
.card {
background-color: #e9d5ff;
padding: 30px;
box-shadow: 0 5px 20px gray;
}Output
Spread Radius
The spread radius controls how much the shadow expands before the blur effect is applied.
.box {
box-shadow: 5px 5px 10px 5px gray;
}The first value controls the horizontal position.
The second value controls the vertical position.
The third value controls the blur.
The fourth value controls the spread of the shadow.
The final value controls the shadow color.
Common Box Shadow Patterns
Card Shadow
A soft shadow can make a card look slightly elevated from the page.
Button Shadow
A small shadow can give buttons a three-dimensional appearance.
Container Shadow
Shadows can visually separate a container from the page background.
Soft UI Shadow
Large blur values can create a soft and subtle interface effect.
Summary
The CSS box-shadow property adds a shadow around an element. You can control the horizontal offset, vertical offset, blur, spread, and color of the shadow. Box shadows are commonly used to create cards, buttons, containers, and modern UI effects.