How to add a beautiful shadow to box containers in HTML and CSS

Designs of websites used to be very boring because shadows did not exist a few years ago. Now that shadows can be added using CSS (Cascading Style Sheets) and HTML (Hypertext Markup Languange), the look and feel of the website can become lively and interesting to the readers in just a few minutes. In this simple activity, we will be adding a beautiful shadow to content or box containers of your website using CSS and HTML. Below is a sample image without shadows – it looks good but wait until you see the same image with shadows. Tip: click on the image for a larger and better view.

Box container without shadows

Box container without shadows

Using the same image, we will add a shadow effect to all of its sides using CSS and add a shadow image at the bottom of the image to make it pop-out even more. For this activity, we need to determine the ID or class of the box container – say, <div id=”boxcontainer”>some codes here</div>. To add the CSS shadow, we will simply add the following code to our CSS file:

#boxcontainer {
background-color: #FFFFFF;
box-shadow: 0 1px 4px rgba(44, 44, 44, 0.3);
}

Box container with CSS shadow

Box container with CSS shadow

The shadow effect will make the box container look better but it will be nicer if we add the HTML shadow, which you can see below.

Before we continue with the HTML shadow, I want you to click on the shadow image below and download it to the images folder of your website – say mywebsite.com/images/shadow.png

Shadow Image

Shadow Image

The full dimension of the shadow image is 980×22 pixels but this image fits well with a 1000px container. If you have a smaller container, you can simply re-size this image file in Photoshop.

After downloading the shadow image, you just simply add the image to your HTML file – see below for examples:

Example 1:
<div id=”boxcontainer”>some codes here</div>
<div align=”center”><img src=”images/shadow.png” alt=”Shadow” /></div>

Example 2 (in HTML File):
<div id=”boxcontainer”>some codes here</div>
<div class=”shadow”></div>

Example 2 (in CSS File):
#boxcontainer {
background-color: #FFFFFF;
box-shadow: 0 1px 4px rgba(44, 44, 44, 0.3);
}

.shadow
{
background-image:url(‘images/shadow.png’);
width:980px;
height:22px;
margin:0px auto; /* adding this line will align the image in the center */
}

Below is the final output. The box container has transformed from simple box to a classy container in just minutes. The next time you will do this, it will only take you 1-2 minutes to finish everything. Hope you like it!

Box container with CSS and HTML Shadows

Box container with CSS and HTML Shadows

Related posts:

Leave a Comment