CSS Shadow Effects (Box Shadow)
CSS box-shadow Property
The CSS box-shadow
property is used to apply one or more shadows to an element.
Specify a Horizontal and a Vertical Shadow
In its simplest use, you only specify a horizontal and a vertical shadow. The default color of the shadow is the current text-color.
Example
Specify a horizontal and a vertical shadow:
color:#000;
box-shadow: 10px 10px;
}
Specify a Color for the Shadow
The color
parameter defines the color of the shadow.
Example
Specify a color for the shadow:
box-shadow: 10px 10px lightblue;
}
Add a Blur Effect to the Shadow
The blur
parameter defines the blur radius. The higher the number, the more blurred the shadow will be.
Example
Add a blur effect to the shadow:
box-shadow: 10px 10px 15px lightblue;
}
Set the Spread Radius of the Shadow
The spread
parameter defines the spread radius. A positive value increases the size of the shadow, a negative value decreases the size of the shadow.
Example
Set the spread radius of the shadow:
box-shadow: 10px 10px 15px 12px lightblue;
}
Set the inset Parameter
The inset
parameter changes the shadow from an outer shadow (outset) to an inner shadow.
Example
Add the inset parameter:
box-shadow: 10px 10px 15px lightblue inset;
}
Add Multiple Shadows
An element can also have multiple shadows, separated by commas:
Example
box-shadow: 5px 5px 5px blue, 10px 10px 5px lightblue, 15px 15px 5px darkblue;
}
Cards
You can also use the box-shadow
property to create paper-like cards. It uses multiple shadows effects:
2
December 2, 2022

Road to Life
Example
width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
}
CSS Shadow Properties
The following table lists the CSS shadow properties:
Property | Description |
---|---|
box-shadow | Adds one or more shadows to an element |
text-shadow | Adds one or more shadows to a text |
Comments
Post a Comment