How to Add a Shadow to a Box in HTML/CSS

How to Use CSS to Insert Box Shadows


How to Add a Shadow to a Box in HTML/CSS

by Christopher Heng, thesitewizard.com

One of my visitors asked me how he could create a "shadowed box" on his web page, by which I understood him to mean that he wanted add a shadow to a box, such as that created using a DIV block.

Prerequisites

This tutorial requires that you know some HTML and CSS, since it delves into the specific code needed to create that effect. As with all my CSS tutorials, you don't actually have to be an expert, but you do need to know at least a smattering of HTML and CSS, otherwise you won't understand what I'm saying nor will you know how to adapt the code for your site and insert it.

The box-shadow CSS Property

As it happens, CSS has a specific property for creating shadows around an element: box-shadow. Take the following DIV block as an example.

DIV block with a shadow

If the HTML code for the above demo is the following:

<div id="shadowsharp">
DIV block with a shadow
</div>

The relevant CSS to produce the shadow is:

#shadowsharp {
  border: 1px solid black ;
  box-shadow: 5px 6px #808080 ;
}

The 5px part of the box-shadow: 5px 6px #808080 rule specifies the length of the horizontal portion of the shadow, and 6px the vertical. The colour ("color" if you use a different variant of English) is set to grey ("gray") in my example, but you can of course use any colour you want.

(Note that I inserted the border rule in my code above to draw the outline around the box, but it is not actually needed for creating the shadow. If you want more details about that property, please read my tutorial on how to draw a retangular box in CSS.)

Shadows for Rounded Boxes

If you have a box with rounded corners, you may wonder how you can make the shadow follow the contours of the sides.

Rounded corners and shadow

The marvellous thing about using box-shadow, as opposed to manually drawing a shadow, is that it automatically adjusts itself to the element's frame. Hence the above box needed no extra code to make the shadow hug the frame of the original DIV block. The rule to create this rounded shadow is exactly the same as in the first example:

box-shadow: 5px 6px #808080 ;

Obviously, the main DIV box code had to be adjusted to make the corners round, but that's a separate topic. The shadow automatically takes the shape of the main box, and so the code for that does not need to be changed.

Adjusting the Direction of the Shadow

The shadow does not have to be at the bottom right. If you want, you can cast the shadow in a different direction, so that it appears at the bottom left, top left, or top right.

Shadow on top left.

The trick to doing this is to give a negative value for the horizontal and vertical lengths. For the above demo, the box-shadow rule was written as:

box-shadow: -5px -5px #808080 ;

The first negative -5px puts the horizontal shadow on the left of the box instead of the right, and the second negative -5px shifts the shadow from below the box to the top. You can mix and match the negative and positive numbers to give it the effect you want. For example, to get a shadow cast towards the bottom left, use box-shadow: -5px 5px #808080.

Blurred Edges

So far, all the shadows that we have created have sharp edges. It's also possible to make the shadow gradually lighter around the edges, fading out until it cannot be seen any more. To do this, you will have to add another number after the horizontal and vertical lengths: the blur radius.

box-shadow: 10px 10px 4px #808080 ;

The first two numbers, "10px 10px", specify the horizontal and vertical lengths as before, and the third number, 4px, is the blur radius. I had to increase the length of the shadow from my example earlier, otherwise you will not be able to see the colour transition. Note that the numbers must be in that order: the horizontal length, vertical length, followed by the blur radius. Incidentally, if you are wondering why it's called a "radius", remember that the shadow will be rounded if the original box had rounded corners.

Shadow with blurred edges

When the blur radius is omitted, it is assumed to have a value of 0. That is, the space in which blurring occurs has a zero width, giving it a sharp edge. This is why my earlier examples did not need to specify the radius, since the implied default of 0 was exactly what I wanted.

Compatibility

The box-shadow property should work in all modern browsers. If your visitors use Internet Explorer, they will need at least version 9 for the shadow to appear.

Copyright © 2018 Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.

thesitewizard™ News Feed (RSS Site Feed)  Subscribe to thesitewizard.com newsfeed

Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.

Please Do Not Reprint This Article

This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.

Related Articles

New Articles

Popular Articles

How to Link to This Page

It will appear on your page as:

How to Add a Shadow to a Box in HTML/CSS





Home
Donate
Contact
Link to Us
No Spam Policy
Privacy Policy
Topics
Site Map

Getting Started
Web Design
Search Engines
Revenue Making
Domains
Web Hosting
Blogging
JavaScripts
PHP
Perl / CGI
HTML
CSS
.htaccess / Apache
Newsletters
General
Seasonal
Reviews
FAQs
Wizards

 

 
Free webmasters and programmers resources, scripts and tutorials
 
HowtoHaven.com: Free How-To Guides
 
Site Design Tips at thesitewizard.com
Find this site useful?
Please link to us.