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

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

  1. Start with an HTML page containing three boxes.
    <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;
    #box1 {
    #box2 {
    #box3 {
    <div id="box1" class="box">
    <div id="box2" class="box">
    <div id="box3" class="box">
    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
Author: Chris Minnick

Chris Minnick, the co-founder of WatzThis?, has overseen the development of hundreds of web and mobile projects for customers from small businesses to some of the world’s largest companies. A prolific writer, Chris has authored and co-authored books and articles on a wide range of Internet-related topics including HTML, CSS, mobile apps, e-commerce, e-business, Web design, XML, and application servers. His published books include Adventures in Coding, JavaScript For Kids For Dummies, Writing Computer Code, Coding with JavaScript For Dummies, Beginning HTML5 and CSS3 For Dummies, Webkit For Dummies, CIW E-Commerce Designer Certification Bible, and XHTML.

About Webucator

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, Azure, Windows, Java, Adobe, Python, SQL, JavaScript, Angular and much more. Check out our complete course catalog.