CSS3 Box Shadow Property and Examples

Box shadow property is one of the best features introduced with CSS3. The basic purpose of box shadow property is to attach drop shadow to the css box elements. This property is really handy for the web designers who want to implement shadows (both inner and outer) to any element inside the web page.  Box shadows are now supported by all latest browsers, so you can use this property without any issue. For older browsers like IE8, the box shadow will not be visible, but functionally, it should not affect the user’s experience. With simple straight-forward syntax of 2 to 4 length values, it is possible to draw the simple drop shadows. However, the usage of this property is not limited merely for creating box shadows; you can really do much more if you are a little creative. The coolest feature of box shadow property is that you can apply multiple shadows to the same element. This along with RGBa color definition gives you the enough food to be creative!

Box Shadow Syntax

Before I take you through its amazing capability, let’s learn about the basic syntax. It will be pretty clear with the following example.

#div_box-shadow
{
box-shadow: 5px 5px 3px 3px #333333;
}

You can see here a nice shadow around the box. The syntax for the box shadow property takes the following values:

box-shadow: horizontal-offset vertical-offset blur-radius spread-radius color;

  • Horizontal offset: Horizontal offset can be defined in a positive or negative value. If you define positive offset, the drop shadow will be drawn in right side of the box. If you wish your shadow to appear in left side of the box, define this value in negative.
  • Vertical offset: Just like horizontal offset, vertical offset value can be defined in positive or negative. Here positive value will draw the shadow below the box while negative above it.
  • Blur Radius: Blur radius is defined to make the shadow smooth. If you set this value to zero, the shadow will be sharp. Higher the value of blur radius, more blur is the shadow. As you can guess, the blur radius can only be defined by a positive value.
  • Spread Radius: Positive value of the spread radius will increase the size of box shadow, negative value will decrease it. With spread radius value, the shadow will expand or contract in all directions.
  • Color: It simply defines the color of shadow. You can use RGBa here to define the color with opacity.

Apart from horizontal and vertical offsets, all other parameters are optional. By default, the value of Blur radius and spread radius is zero. The default value of shadow color is inherited from the color definition of the box.

Inset Box Shadow

The syntax of defining inset box shadow is essentially the same. You just need to insert an ‘inset’ keyword at the start or end of the syntax like this.

#div_inset-shadow
{
box-shadow: 0px 0px 3px 3px #333333 inset;
}

Or

#div_inset-shadow
{
box-shadow: inset 0px 0px 3px 3px #333333;
}

Even though the syntax of css box shadow property is pretty simple, you don’t really need to remember it. You can use our box shadow generator to generate the required css code for both drop shadow and inset box shadow. You just need to tweak the sliders to get the desired effect and then copy and paste the generated codes in your style sheet.

Box Shadow with Border Radius

Just like box shadow, with CSS3, you can also define the border radius of the box. Border radius makes the corners of the box round. If you apply box shadow along with border radius, the shadow will also have the rounded corners. However, if you use border-image property, the shadow will not be get changed (remain with sharp corner).

CSS Box Shadow Examples

Now that you have the basic idea of CSS box shadow property, let’s get into creating some real cool stuff out of it.

Smooth outer Box Shadow

border-radius: 50%;
box-shadow: 0px 0px 12px 0px #6B6B6B;

 

Inset Box Shadow with border radius

border-radius: 50%;
box-shadow: inset 5px 5px 10px #000000;

 

Smooth Inset Box Shadow

box-shadow: inset 0 0 1em gold;

 

Decent Inset Box Shadow

box-shadow: inset 5em 1em gold;

 

Multiple Box Shadow

 

box-shadow: 0.5em -0.5em 0.5em red,
            0.5em 0.5em 0.5em gold,
           -0.5em 0.5em 0.5em green,
           -0.5em -0.5em 0.5em blue;

 

Multiple Box Shadow (five shadows)

 

 

box-shadow: 0px 0px 10px 5px black, 
            20px -15px lime, 
            20px 15px 30px red, 
            -20px 15px yellow, 
            -20px -15px 30px blue;

 

Flying Circles

 

box-shadow: 50px 50px 0px -20px rgba(255, 255, 0, 0.8),
            180px 150px 0px 20px rgba(100, 255, 100, 0.6), 
            100px -80px 0px -60px rgba(0, 255, 0, 0.8),
            200px -50px 0px 10px rgba(0, 100, 80, 1), 
            250px 80px 0px -30px rgba(255, 0, 0, 0.6), 
            180px 20px 0px -20px rgba(0, 0, 0, 0.8);

 

In the example above, there is only one box with same height and width. I have added border-radius as 50% to make it circle. Other circles are just it’s shadow with varying offset, spread radius and color.

Box Shadow – Bottom Only

 

box-shadow: 0 8px 6px -6px black;

If you look at these example closely, you will have the following observations:

  • Box-shadow does not take up space, i.e. it does not affect the page layout. It can overlap the other elements or their shadows. It also means that the box shadows will not trigger scrolling or increase the size of scrollable area.
  • If you are using multiple shadows, it will be applied front to back. So, the first shadow defined will appear on top of the next shadow and so on.

W3C Candidate Recommendation

To understand the effects of box-shadow offset, spread and blur along with border radius, we will use the following diagram (it has been taken from W3C Candidate Recommendation of 24 July 2012).

Box Shadow spread-blur

Width: 100px; Height: 100px;
Border: 12px solid blue; Background-color: orange;
Border-top-left-radius: 60px 90px;
Border-bottom-right-radius: 60px 90px;
Box-shadow: 64px 64px 12px 40px rgba(0,0,0,0.4),
            12px 12px 0px 8px rgba(0,0,0,0.4) inset;

Few important notes from W3C Candidate Recommendation

Outer box-shadow and inner box-shadow implementation mechanism

An outer box-shadow casts a shadow as if the border-box of the element were opaque. The shadow is drawn outside the border edge only: it is clipped inside the border-box of the element.

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.

Box shadow spread and blur definitions

If a spread distance is defined, the shadow is expanded outward or contracted inward by an operation equivalent to applying the absolute value of the spread value to a blur operation as defined below and thresholding the result such that for a positive spread distance all non-transparent pixels are given the full shadow color and for a negative spread distance all non-opaque pixels are made transparent. The UA may approximate this operation by taking an outward outset of the specified amount normal to the original shadow perimeter. Alternatively the UA may approximate the transformed shadow perimeter shape by outsetting (insetting, for inner shadows) the shadow’s straight edges by the spread distance and increasing (decreasing, for inner shadows) and flooring at zero the corner radii by the same amount. (The UA may even combine these methods, using one method for outer shadows and another for inner ones.) For corners with a zero border-radius, however, the corner must remain sharp—the operation is equivalent to scaling the shadow shape. In any case, the effective width and height of the shadow shape is floored at zero. (A zero-sized shadow shape would cause an outer shadow to disappear, and an inner shadow to cover the entire padding-box.)

These excerpts have directly been taken from W3C website. You may like to get the full details in section 7.2 here.

Leave a Reply

Your email address will not be published. Required fields are marked *