{box-shadow} Property | CSS: Presentation Layer
Standards Based Development
box-shadows take the shape of their parent. box-shadow accepts six parameters, four of which are optional. Below is the syntax for box-shadow:
box-shadow: inset x-offset y-offset blur-radius spread color
Inset
Box shadow inset parameter (optional) places shadows inside the box rather than outside of it.
.box-shadow-02{width: 100px;
height: 100px;
border: 1px solid black;
margin: 50px auto;
box-shadow: inset 10px 10px}
Position X-Offset
Box shadow x-offset parameter (required) defines a shadow's position along the x-axis (horizontal); accepts negative values, which move the shadow left.
Position Y-Offset
Box shadow y-offset parameter (required) defines a shadow's position along the y-axis (vertical).
X and Y Offsets (Positioning) Demo
.box-shadow-01{
width: 100px;
height: 100px;
border: 1px solid black;
margin: 50px auto;
box-shadow: 10px 10px;
}
Blur Radius
Box shadow blur radius parameter defines how much blur the shadow has; the higher the value, the higher the blur radius, the more smooth the shadow will be. Default value is 0, when not specified.
.box-shadow-03,.box-shadow-04{
width: 50px;
height: 50px;
border: 1px solid black;
margin: 50px auto;
box-shadow: 5px 5px 15px}
.box-shadow-04{
box-shadow: inset 5px 5px 15px;
}
Spread
Box shadow spread parameter (optional) controls how much the shadow spreads (bigger or smaller), default 0.
.box-shadow-07,.box-shadow-08{
width: 50px;
height: 50px;
border: 1px solid black;
margin: 50px auto;
box-shadow: 10px 10px 0 -5px}
.box-shadow-08{width: 100px; box-shadow: 10px 10px 0 5px}
Color
Box shadow parameter (optional) defines the color of the shadow; default color is #000.
.box-shadow-05,.box-shadow-06{
width: 50px;
height: 50px;
border: 1px solid black;
margin: 50px auto;
box-shadow: 5px 5px 15px indianRed}
.box-shadow-06{box-shadow: inset 5px 5px 15px rgba(155, 15, 80, 0.8)}
Multiple Box Shadows
box-shadow can accept multiple values, allowing the replication of an element multiple times, even with different positions (offsets) and different sizes (spread).
.box-shadow-09{width: 50px;
height: 50px;
border: 1px solid black;
margin: 70px auto;
box-shadow:
70px 70px 0 5px,
-60px 60px 0 0px,
-60px -60px 0 -5px,
50px -50px 0 -10px}