Browser

CSS3: How to implement the box-shadow property

Ryan Boudreaux uses multiples examples of CSS3 code to illustrate the effects that are possible with the box-shadow property.

Continuing in our CSS3 series this segment will focus on the box-shadow property, which can be implemented today for display within several modern browsers. Full details of the W3C Backgrounds and Borders Candidate Recommendation can be found in section 7.2 for the box-shadow property.

All demonstrations and examples in this segment on the box-shadow property will be utilizing the HTML displayed below:

<div class="shadow">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean egestas blandit ipsum. Morbi nulla metus, luctus et, ullamcorper sit amet, commodo quis, nisl. Ut blandit lacus nec nibh. Phasellus eleifend enim et risus. Nam condimentum. Praesent euismod auctor dui.</p>
</div>

Box-shadow

The shadow property has been around since CSS2; however, now, the shadow property can be applied to borders, images, and text with both inner and outer drop shadows, and allows the specifications for color, size, blur, and offset values. To further define the shadow styling options with CSS3, the box-shadow property can permit a comma-separated list of shadow values which are defined by a 2 to 4 length value expression specified in the following order: horizontal and vertical offsets, blur distance, spread distance, an optional color value, and finally, an optional inset keyword value to create an inner shadow as opposed to the default outer shadow.

CSS3 is taking the shadow property beyond its previous support solely within the Safari browser to include the respective prefixes for Mozilla Firefox and Chrome, Safari, and Konqueror using -moz- and -webkit-.

The syntax for the CSS3 box-shadow is written in the form:

box-shadow: Xpx Ypx Bpx Lpx #abc;
  • Xpx = x-axis horizontal offset
  • Ypx = y-axis vertical offset
  • Bpx = blur effect
  • Lpx = spread length
  • #abc = color

Components of the box-shadow property are decoded by browsers in the following manner:

  • The first length for the horizontal offset will cast the shadow to the right of the box with a positive value, and a negative value will cast the shadow to the left of the box.
  • The second length is for the vertical offset, and a positive value will cast the shadow below the box while a negative value will cast the shadow above the box.
  • The third length is the blur effect, and when set to 0 will be a sharp result, while a higher value will add more blurring style. Negative values are not allowed.
  • A fourth length is the spread distance where positive values cause the shadow shape to expand in all directions by the specified radius, and negative values cause the shadow shape to contract.
  • The color is the defined color of the shadow shape.
  • The "inset" keyword, if present results in an inner shadow where the box will appear as if cut out of the canvas and shifted behind it.

The diagram below, provided by the W3C Backgrounds and Borders Candidate Recommendation, demonstrates the effects of spread and blur on the shadow:

Figure A

Using similar values defined in the W3C example above and applying similar styling to the HTML example above produces a similar result as displayed in the CSS3 code and resulting display shown below.

.shadow {
      width:400px;
      height:120px;
      border: 12px solid blue;
      background-color: orange;
      border-top-left-radius: 60px 90px;
      border-bottom-right-radius: 60px 90px;
      box-shadow: 25x 30px 15px 1px rgba(0,0,0,0.4),
                     12px 12px 0px 8px rgba(0,0,0,0.4) inset;
            -moz-box-shadow: 25px 30px 15px 1px rgba(0,0,0,0.4),
                     12px 12px 0px 8px rgba(0,0,0,0.4) inset;
      -webkit-box-shadow: 25px 30px 15px 1px rgba(0,0,0,0.4),
                      12px 12px 0px 8px rgba(0,0,0,0.4) inset;
      padding: 5px 20px;
}

Here is the result rendered in Chrome 14.0.835:

Figure B

The following demonstrations will highlight the box-shadow property components and several options for their use. The example CSS3 style property rules listed below define a shadow box with a 10px by 10px box-shadow with an 8px shadow cast length, and a bottom-right-radius of 35px:

.shadow {
      border: 10px solid #708090;
      box-shadow: 10px 10px 8px #d3d3d3;
      -moz-box-shadow: 10px 10px 8px #d3d3d3;
      -moz-border-radius-bottomright: 35px;
      -webkit-box-shadow: 10px 10px 8px #d3d3d3;
      -webkit-border-bottom-right-radius: 35px;
      width:400px; padding: 10px 10px;
}

This results in the following image as rendered in Chrome 14.0.835:

Figure C

A similar CSS3 construct can be used incorporating the Mozilla -moz- prefix for the border-radius shorthand rule, which was discussed in the previous CSS3 segment. This example specifies the top-left radius and bottom right radius at 35px each, but in combination with the above styling properties, this is compliant only in Firefox; note the moz-border-radius-bottomright is commented out:

.shadow {
      border: 10px solid #708090;
      box-shadow: 10px 10px 8px #d3d3d3;
      -moz-border-radius: 35px 0px 35px 0px;
      -moz-box-shadow: 10px 10px 8px #d3d3d3;
     /* -moz-border-radius-bottomright: 35px; */
      -webkit-box-shadow: 10px 10px 8px #d3d3d3;
      -webkit-border-bottom-right-radius: 35px;
      width:400px; padding: 10px 10px;
}

Below is the result in Firefox 6.0.2:

Figure D

In addition, the same end result can be obtained with the added CSS3 -webkit- prefix for Chrome, Safari, and Konqueror with the following styling property for border-top-left-radius added as highlighted below:

.shadow {

border: 10px solid #708090;

box-shadow: 10px 10px 8px #d3d3d3;

-moz-border-radius: 35px 0px 35px 0px;

-moz-box-shadow: 10px 10px 8px #d3d3d3;

/* -moz-border-radius-bottomright: 35px; */

-webkit-box-shadow: 10px 10px 8px #d3d3d3;

-webkit-border-bottom-right-radius: 35px;

-webkit-border-top-left-radius: 35px;

width:400px; padding: 10px 10px;

}

Here's the result as rendered in Chrome 14.0.835:

Figure E

Box-shadow offset examples

Now, I'll give you some examples which break down the box-shadow into contrary offsets. You'll see blur and spread displayed individually to show off their separate effects when applied with the CSS3 box-shadow properties.

Example 1 shows a shadow offset to the left and top by -6px:

.shadow_1 {
      border: 10px solid #708090;
      -moz-box-shadow: -6px -6px #d3d3d3;
      -webkit-box-shadow: -6px -6px #d3d3d3;
      box-shadow: -6px -6px #d3d3d3;
      width:500px;
      padding: 10px 10px;
}

Note: All examples are displayed in Chrome 14.0.835.

Figure F

Example 2 shows the same shadow offset to the left with a blur distance of 6px added:

.shadow_2 {
      border: 10px solid #708090;
      -moz-box-shadow: -6px -6px 6px #d3d3d3;
      -webkit-box-shadow: -6px -6px 6px #d3d3d3;
      box-shadow: -6px -6px 6px #d3d3d3;
      width:500px;
      padding: 10px 10px;
}

Figure G

Example 3 shows the same shadow effect with a spread distance of 6px added:

.shadow_3 {
      border: 10px solid #708090;
      -moz-box-shadow: -6px -6px 6px 6px #d3d3d3;
      -webkit-box-shadow: -6px -6px 6px 6px #d3d3d3;
      box-shadow: -6px -6px 6px 6px #d3d3d3;
      width:500px;
      padding: 10px 10px;
}

Figure H

Example 4 shows the same shadow effect with both a blur distance of 6px and a spread distance of 6px:

.shadow_4 {
      border: 10px solid #708090;
      -moz-box-shadow: -6px -6px 6px 6px #d3d3d3;
      -webkit-box-shadow: -6px -6px 6px 6px #d3d3d3;
      box-shadow: -6px -6px 6px 6px #d3d3d3;
      width:500px;
      padding: 10px 10px;
}

Figure I

And a few more examples are displayed here using the inset keyword to specify an inner shadow. The specification states that an inner box-shadow casts a shadow as if everything outside the padding edge were opaque. The inner shadow is drawn inside the padding edge only: it is clipped outside the padding box of the element.

Example 5 shows an inner shadow offset to the left and top by -7px:

.shadow_5 {
      border: 10px solid #708090;
      -moz-box-shadow: inset -7px -7px #d3d3d3;
      -webkit-box-shadow: inset -7px -7px #d3d3d3;
      box-shadow: inset -7px -7px #d3d3d3;
      width:500px;
      padding: 10px 10px;
}

Figure J

Example 6 shows the same inner shadow with both a blur distance of 7px and a spread distance of 7x:

.shadow_6 {
      border: 10px solid #708090;
      -moz-box-shadow: inset -7px -7px 7px 7px #d3d3d3;
      -webkit-box-shadow: inset -7px -7px 7px 7px #d3d3d3;
      box-shadow: inset -7px -7px 7px 7px #d3d3d3;
      width:500px;
      padding: 10px 10px;
}

Figure K

The next segments on CSS3 will cover layering multiple shadows within the box-shadow property, 3D text, text-shadow, transitioning properties, and other styling options that can be implemented in most modern browsers today.

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

2 comments
bishgate
bishgate

I appreciate your effort on this topic. Its something that i have been trying to achieve. Thanks alot! Ola

Editor's Picks