The box-shadow
property defines the shadow of an element. The syntax of box-shadow
is similar to css text shadow
box-shadow: <inset> <offset-x> <offset-y> <blur-radius> <spread-radius> <color>;
<inset>
- Optional. If ommited, shadow is assumed to be a drop shadow<offset-x>
- Positive value push shadow to right and negative to left<offset-y>
- Positive value push shadow to bottom and negative to top<blur-radius>
- Optional. Lesser the value, hard is the shadow where as higher the<spread-radius>
- Optional. Positive values will cause the shadow to expand and grow bigger, negative values will cause the shadow to shrink. If not specified, it will be 0<color>
- Optional. Any valid web font colorWe can apply multiple shadow effects to element by defining multiple comma separated shadow values.
Let’s first create an element on which we can apply box-shadow
<blockquote> It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </blockquote>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
To add more visual effect to the container we are going to apply box-shadow
using below styles
box-shadow: 3px 3px 10px grey;
In plain English, we are applying 3px
shadow to bottom and right respectively with 10px
blur radius to have smooth shadow using color or grey
For demonstration, I am using inline styles
<blockquote style="box-shadow: 3px 3px 10px grey"> It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </blockquote>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
Wow, the container now looks more appealing and lifted. You can play with blur radius to create different effects
Here, is another one I like to create hard border on bottom and right
li { box-shadow: 5px 5px 5px grey }
Let’s go back to our initial example and apply multiple shadows using below styles
box-shadow: -9px 0px 12px -7px #000000, 9px 0px 12px -7px #000000, 5px 5px 15px 5px rgba(0, 0, 0, 0);
Updated markup
<blockquote style="box-shadow: -9px 0px 12px -7px #000000, 9px 0px 12px -7px #000000, 5px 5px 15px 5px rgba(0,0,0,0)" > It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </blockquote>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
Another extra box-shadow feature that makes it more flexible than text-shadow is the inset keyword. When we specify the inset
keyword while defining shadow, it changes the shadow from an outer shadow (outset) to an inner shadow.
Going back to the first example - now we will just add inset keyword in styles as shown below and rest or markup remain the same.
<blockquote style="box-shadow: inset 3px 3px 10px grey"> It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </blockquote>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
If you compare, the output of drop shadow and inset shadow you can see, the inset shadow creates a deboss effect whereas the drop shadow creates an emboss effect.
You can play online with some of the tools mentioned below to generate cool effect using box-shadow
Thanks for reading!! 😃