Box-shadow: How to create shadow effects on html elements

Box-shadow effects can add an extra dimension to the html elements in your page. Especially when the elements like h, p, div are styled with border. By using shadow effects with blur, you can make your heading or paragraph more attractive, vivid, highlighted and smarter. This tutorial will walk you through the process how to create such shadow effects on html elements by using box-shadow property.

Let’s enter deep into the project:

CSS tricks to create shadow effects on html elements

First let’s take a p element. Style it with width, height and background that would look excellent. Set margin:auto to align the element in center of the container. Just do as shown below:

<p style="width:25%;
height:100px;
background:orchid;
margin:auto;
border-radius:10px;"> </p>

Let’s have a look at the output:

In output, we see a simple rectangular box with orchid background.

Now let’s add shadow effects on it. First set box-shadow property as:

box-shadow: 5px 5px black;

Here we see three values. The third value is the shadow effect color. The first length value stretches the color (black) to the right (horizontal shadow) and the second length value stretches the color to the bottom (vertical shadow). Now let’s reset the code and look at output.

CODE

<p style="width:25%;
height:100px;
background:orchid;
margin:auto;
border-radius:10px;
box-shadow: 5px 5px black;
"> </p>

OUTPUT

Now do you like to blur the effect? Just use another (third) length value with box-shadow. This will smoothly blur the color (black). See below:

CODE

<p style="width:25%;
height:100px;
background:orchid;
margin:auto;
border-radius:10px;
box-shadow: 5px 5px 6px black;
"> </p>

OUTPUT

Fantastic!! No?

Other examples of shadow effects with box-shadow

Example-2

CODE

<h2 style="width:70%;
margin:auto;
text-align:center;
box-shadow: 3px 3px 10px navy;">
Heading with box-shadow</h2>

Output

Heading with box-shadow

Example-3

CODE

<div style="width:50%;
border:4px ridge black;
margin:auto;
padding:10px;">
<div style="width:100%;
height:30px;
background:#8FBC8F;
box-shadow: 2px 2px 3px black;
margin-bottom:2px;"> 
</div>
<div style="width:100%;
height:30px;
background:#8FBC8F;
box-shadow: 2px 2px 3px black;"> 
</div>
</div>

Output

Hope you enjoyed. Thanks.