Property - box-shadow

Introduction

The CSS3 box-shadow property allows you to apply one or more shadows to any box - including outer and inner box shadows.

An outer box-shadow casts a shadow as if the box were opaque. The shadow is drawn outside the border edge only.

An inner box-shadow casts a shadow as if everything outside the box were opaque. The inner shadow is drawn inside the padding edge only.

The box-shadow should follow any curved corners that have been defined with border-radius.

Syntax

The <'box-shadow'> property syntax is:

<'box-shadow'> =
  none | <shadow>#

This means that the <shadow> value can be specified as none or using one or more <shadow> values, separated by commas.

The <shadow> property syntax is:

<shadow>
  = inset? && <length>{2,4} && <color>?

This means that a <shadow> can be written with an optional inset keyword value, 2-4 <length> values and an optional <color> value.

The && symbol indicates that the optional inset value, the 2-4 <length> values and the optional <color> value can be written in any order.

Some examples of the box-shadow syntax in action:

/* all possible values specified */
p { box-shadow:
  inset 10px 10px 10px 10px red; }

/* different order */
p { box-shadow:
  red 10px 10px 10px 10px inset; }

/* no inset specified */
p { box-shadow:
  10px 10px 10px 10px red; }

/* no color specified */
p { box-shadow:
  10px 10px 10px 10px; }

/* no spread-radius specified */
p { box-shadow:
  10px 10px 10px; }

/* no blue-radius specified */
p { box-shadow:
  10px 10px; }

inset

The inset value is optional. If it is not specified, the shadow will appear outside and behind the box as a drop shadow.

If the inset value is specified, the shadow will appear inside the box.

An inset shadow will be positioned inside the border-box.

It will sit above any background-images or background colors, but below the content.

Exercise 1: Write some basic box-shadows

Open this HTML file in an editor:
exercises-start/exercise-214-03-01.html

Write a CSS rule to style example1 with a box-shadow value of 10px 10px 10px 0 #777.

.example1 {
  box-shadow: 10px 10px 10px 0 #777;
}

Write a second CSS rule to style example2 with a box-shadow value of inset 10px 10px 10px 0 #777.

.example2 {
  box-shadow: inset 10px 10px 10px 0 #777;
}

Check your work against the finished HTML file:
exercises-finished/exercise-214-03-01.html

color

The <color> value is optional. If it is not specified, the shadow should default to the <color> value used for the box.

The <color> value can be written using any of the following options:

<color> =
  <hex-color> |
  <rgb()> |
  <rgba()> |
  <hsl()> |
  <hsla()> |
  <named-color> |
  <deprecated-system-color> | 
  currentcolor |
  transparent

These options are explained in the Property - color slide deck.

Exercise 2: Write some colored box-shadows

Open this HTML file in an editor:
exercises-start/exercise-214-03-02.html

Write a CSS rule to style example1 with a box-shadow value of 10px 10px 10px 0 black.

.example1 {
  box-shadow:
    10px 10px 10px 0 black;
}

Write a second CSS rule to style example2 with a box-shadow value of 10px 10px 10px 0 rgba(140,140,0,.5).

.example2 {
  box-shadow:
    10px 10px 10px 0 rgba(140,140,0,.5);
}

Check your work against the finished HTML file:
exercises-finished/exercise-214-03-02.html

offset-x

The first length value, <offset-x> defines the horizontal offset.

A positive value will place the shadow on the right of the box.

p {
  box-shadow: 10px 0 5px 0 #777;
}

A negative value will place the shadow on the left of the box.

p {
  box-shadow: -10px 0 5px 0 #777;
}

A value of 0 will place the shadow directly behind the box on the horizontal axis.

The <offset-x> is defined using a <length> value, which means the value can be defined using any of the following units.

/* Font-relative lengths */
ch
em
ex
rem

/* Viewport-percentage lengths */
vh
vw
vmin
vmax

/* Absolute length units */
px
cm
mm
in
pc
pt

Exercise 3: Set the offset-x value

Open this HTML file in an editor:
exercises-start/exercise-214-03-03.html

Write a CSS rule to style example1 with a box-shadow value of 10px 0 5px 0 #777.

.example1 {
  box-shadow: 10px 0 5px 0 #777;
}

Write a second CSS rule to style example2 with a box-shadow value of -10px 0 5px 0 #777.

.example2 {
  box-shadow: -10px 0 5px 0 #777;
}

Check your work against the finished HTML file:
exercises-finished/exercise-214-03-03.html

offset-y

The second length value, <offset-y> defines the vertical offset.

A positive value will place the shadow below the box.

p {
  box-shadow: 0 10px 5px 0 #777;
}

A negative value will place the shadow above the box.

p {
  box-shadow: 0 -10px 5px 0 #777;
}

A value of 0 will place the shadow directly behind the box on the vertical axis.

The <offset-y> is defined using a <length> value, which means the value can be defined using any of the following units.

/* Font-relative lengths */
ch
em
ex
rem

/* Viewport-percentage lengths */
vh
vw
vmin
vmax

/* Absolute length units */
px
cm
mm
in
pc
pt

Exercise 4: Set the offset-y value

Open this HTML file in an editor:
exercises-start/exercise-214-03-04.html

Write a CSS rule to style example1 with a box-shadow value of 10px 0 5px 0 #777.

.example1 {
  box-shadow: 0 10px 5px 0 #777;
}

Write a second CSS rule to style example2 with a box-shadow value of -10px 0 5px 0 #777.

.example2 {
  box-shadow: 0 -10px 5px 0 #777;
}

Check your work against the finished HTML file:
exercises-finished/exercise-214-03-04.html

blur-radius

The third length value, <blur-radius> defines the amount of blur in the shadow.

This value is optional. If not specified, it will default to 0.

If set to a value of 0 the shadow will be hard-edged.

p {
  box-shadow: 10xp 10px 0 0 #777;
}

The higher the blur radius number, the softer the box-shadow will be.

p {
  box-shadow: 10xp 10px 10px 0 #777;
}

Negative values are not allowed for the blur radius.

The <blur-radius> is defined using a <length> value, which means the value can be defined using any of the following units.

/* Font-relative lengths */
ch
em
ex
rem

/* Viewport-percentage lengths */
vh
vw
vmin
vmax

/* Absolute length units */
px
cm
mm
in
pc
pt

Exercise 5: Set the blue-radius value

Open this HTML file in an editor:
exercises-start/exercise-214-03-05.html

Write a CSS rule to style example1 with a box-shadow value of 10px 10px 0 0 #777.

.example1 {
  box-shadow: 10px 10px 0 0 #777;
}

Write a second CSS rule to style example2 with a box-shadow value of 10px 10px 20px 0 #777.

.example2 {
  box-shadow: 10px 10px 20px 0 #777;
}

Check your work against the finished HTML file:
exercises-finished/exercise-214-03-05.html

spread-radius

The fourth length value, <spread-radius> defines the amount that the shadow increases or decreases in size compared to the box.

This value is optional. If not specified, it will default to 0.

If set to a value of 0 the shadow will remain the same size as the box.

Positive values cause the shadow to expand in all directions (so the shadow appears larger than the box).

p {
  box-shadow: 10xp 10px 10px 10px #777;
}

Negative values cause the shadow to contract in all directions (so the shadow appears smaller than the box).

p {
  box-shadow: 10xp 10px 10px -10px #777;
}

The <spread-radius> is defined using a <length> value, which means the value can be defined using any of the following units.

/* Font-relative lengths */
ch
em
ex
rem

/* Viewport-percentage lengths */
vh
vw
vmin
vmax

/* Absolute length units */
px
cm
mm
in
pc
pt

Exercise 6: Set the spread-radius value

Open this HTML file in an editor:
exercises-start/exercise-214-03-06.html

Write a CSS rule to style example1 with a box-shadow value of 25px 25px 10px 10px #777.

.example1 {
  box-shadow: 25px 25px 10px 10px #777;
}

Write a second CSS rule to style example2 with a box-shadow value of 25px 25px 10px -10px #777.

.example2 {
  box-shadow: 25px 25px 10px -10px #777;
}

Check your work against the finished HTML file:
exercises-finished/exercise-214-03-06.html

Multiple backgrounds

Multiple box shadows can be applied to a box. They are applied as a comma-separated list.

p {
  box-shadow:
    10px 10px 5px 5px black,
    20px 20px 5px 5px yellow;
}

The shadow that is defined first is displayed at the top and the others are layered behind.

Exercise 7: Create some multiple box-shadows

Open this HTML file in an editor:
exercises-start/exercise-214-03-07.html

Write a CSS rule to style example1 with three box-shadow values:

.example1 {
  box-shadow:
    5px 5px 0 0 green,
    10px 10px 0 0 red,
    15px 15px 0 0 blue;
}

Write a second CSS rule to style example2 with three box-shadow values:

.example2 {
  box-shadow:
    inset 5px 5px 0 0 green,
    inset 10px 10px 0 0 red,
    inset 15px 15px 0 0 blue;
}

Check your work against the finished HTML file:
exercises-finished/exercise-214-03-07.html