CSS Box Shadow
Using CSS we can make a shadow of a box.
This is controlled by the box-shadow property.
A box-shadow has a color, and its dimensions can be specified with up to six values, which are given down below -
In other words they can also be said as property value
1. offset-x - the horizontal distance.
2. offset-y - the vertical distance.
3. blur-radius - 0 by default. value cannot be negative. the bigger the value, the bigger and lighter the shadow becomes.
4. spread-radius - Zero by default. positive values will cause the shadow to expand. negative values will cause the shadow to shrink.
5. inset -
by default, the shadow is treated as a drop shadow. the inset keyword draws the shadow inside the frame/border.
6. Color
Color can be of various notations: a color keyword, hexadecimal, rgb(), rgba(), hsl(), hsla().
Now we will see the syntax -
Syntax -
|
box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;
|
Now we will see various kinds of example -
Example 1 - A simple box shadow -
|
<style>
.shadow {
box-shadow: 5px 5px black;
background: #CCCCCC;
width: 10rem;
height: 5rem;
}
</style>
<div class="shadow"></div>
|
Output -
We can also add a blur radius to blur the shadow, as demonstrated in the Example below -
Example 2 - Adding a blur radius -
|
<style>
.shadow {
box-shadow: 5px 5px 10px black;
background: #CCCCCC;
width: 10rem;
height: 5rem;
}
</style>
<div class="shadow"></div>
|
Output -
Example 3 - Adding a spread radius without a blur radius
|
<style>
.shadow {
box-shadow: 5px 5px 0 5px black;
background: #CCCCCC;
width: 10rem;
height: 5rem;
}
</style>
<div class="shadow"></div>
|
Output -
Finally, we can apply the blur radius again to see the full result -
Example - Shadow with a blur and spread radius
|
<style>
.shadow {
box-shadow: 5px 5px 10px 5px black;
background: #CCCCCC;
width: 10rem;
height: 5rem;
}
</style>
<div class="shadow"></div>
|
Output -
Example - Setting the X and Y offsets to zero
|
<style>
.shadow {
box-shadow: 0 0 5px 5px black;
background: #CCCCCC;
width: 10rem;
height: 5rem;
}
</style>
<div class="shadow"></div>
|
Output-
Example - multiple shadows
|
<style>
.box_shadow {
width: 100px;
height: 100px;
margin: 100px;
box-shadow:
-52px -52px 0px 0px #f65314,
52px -52px 0px 0px #7cbb00,
-52px 52px 0px 0px #00a1f1,
52px 52px 0px 0px #ffbb00;
}
</style>
<div class="box_shadow"></div>
|
Output -
