How to Create Drop Shadows with the box-shadow Property in CSS3

  • google plus

In Brief...

With the box-shadow property, we can attach a drop shadow to an element. Here's how:

Take our Advanced CSS Training course for free.

See the Course Outline and Register

Instructions

  1. Start with an HTML page containing three boxes.
  2. 
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Drop Shadows</title>
    <style type="text/css">
    body {
    	padding: 30px;
    }
    p {
    	margin: 0;
    	padding: 10px;
    }
    .box {
    	width: 90%;
    	margin: 30px;
    	background:#000;
    	color:#fff;
    }
    #box1 {
    
    }
    #box2 {
    
    }
    #box3 {
    
    }
    
    </style>
    </head>
    <body>
    <div id="box1" class="box">
    	<p>Box1</p>
    </div>
    
    <div id="box2" class="box">
    	<p>Box2</p>
    </div>
    
    <div id="box3" class="box">
    	<p>Box3</p>
    </div>
    
    </body>
    </html>
    	
    If you open this page in a browser, it looks like this:
    Boxes without shadows
  3. A drop shadow can be applied to an element using just as few as three values. To create a simple drop shadow, add the following box-shadow property to box1.
    
    #box1 {
    	box-shadow: 5px 10px #000;
    }
    
    The first value (5px) is the horizontal offset, or how far to the right the shadow falls. The second value (10px) is the vertical offset, or how far down the shadow falls. The third value (#000) is the color of the shadow. Note that the horizontal and vertical offset values can be negative, to display the shadow to the left or top of the element.
  4. Create a more complex and realistic shadow with the addition of two more values before the color: the blur radius (4px in the following example), which gives the shadow a "fuzzy" edge, and the spread distance (2px in the following example), which extends the shadow away from the element in all directions.
    
    #box2 {
    	box-shadow: 5px 10px 4px 2px #f00;
    }
    
  5. You can add multiple shadows to an element with one box-shadow property by separating sets of values with a comma, like this:
    #box3 {
    	box-shadow: 5px 5px #f00, -5px -10px #00f;
    }
    
  6. Open the HTML page in a browser. The three boxes should look like this:
    Boxes with Drop Shadows

Webucator provides instructor-led training to students throughout the US and Canada. We have trained over 90,000 students from over 16,000 organizations on technologies such as Microsoft ASP.NET, Microsoft Office, XML, Windows, Java, Adobe, HTML5, JavaScript, Angular, and much more. Check out our complete course catalog.

Categories

Courses

Author: Chris Minnick

Chris is a prolific author and trainer, and the CEO of WatzThis?. His published books include Writing Computer Code, JavaScript for Kids, Coding with JavaScript For Dummies, Beginning HTML5 and CSS3 For Dummies, Webkit For Dummies, CIW eCommerce Certification Bible, and New Riders' XHTML.

Discuss