Loading lesson path
Formula
box - shadow property is used to apply one or more shadows to an element.In its simplest use, you can only specify the horizontal and the vertical offset of the shadow. In addition, you can add a shadow color, a spread radius, a blur effect, and change the shadow from an outer shadow to an inner shadow (inset).
In its simplest use, you only specify the horizontal and the vertical offset of the shadow. The default color of the shadow is the current text color.
Formula
A < div > element with a box - shadowSpecify a horizontal and a vertical shadow: div
{
box-shadow: 10px 10px;
}The color parameter defines the color of the shadow.
Formula
A < div > element with a lightblue box - shadowSpecify a color for the shadow: div
{
box-shadow: 10px 10px lightblue;
}The blur parameter defines the blur radius of the shadow. The higher the number, the more blurred the shadow will be.
Formula
A < div > element with a 5px blurred, lightblue box - shadowAdd a blur effect to the shadow: div
{
box-shadow: 10px 10px 5px lightblue;
}The spread parameter defines the spread radius of the shadow. A positive value increases the size of the shadow, and a negative value decreases the size of the shadow.
Formula
A < div > element with a blurred, lightblue box - shadow, with a spread radius of 12pxSet the spread radius of the shadow: div
{
box-shadow: 10px 10px 5px 12px lightblue;
}The inset parameter changes the shadow from an outer shadow (outset) to an inner shadow (inside an element's frame).
Formula
A < div > element with a blurred, lightblue, inset box - shadowdiv
{
box-shadow: 10px 10px 5px lightblue inset;
}An element can also have multiple shadows.
Formula
To attach more than one shadow to an element, add a comma - separated list of shadows.
A < div > element with multiple shadows{
box-shadow: 5px 5px 8px blue, 10px 10px 8px red, 15px 15px 8px green;
}Formula
You can also use the box - shadow property to create paper - like cards:January 1, 2021 Hardanger, Norway
Example div.card
{
width: 250px;Formula
box - shadow: 0 4px 8px 0 rgba(0, 0,0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);Formula
text - align:center;
}
Try it (Text Card) »
Try it (Image Card) »The following table lists the CSS shadow properties:
Formula
Adds one or more shadows to an element text - shadowAdds one or more shadows to a text