Back to Week 6 page »

Drop Shadows (and more) with box-shadow

box-shadow Syntax

The box-shadow allows us to create shadow effects on elements in our pages.

box-shadow: 64px 64px 12px 40px rgba(0,0,0,0.4)

The property values represent:

  1. Horizontal offset: Specifies the horizontal offset of the shadow. A positive value draws a shadow that is offset to the right of the box, a negative length to the left.
  2. Vertical offset: Specifies the vertical offset of the shadow. A positive value offsets the shadow down, a negative one up.
  3. Blur Radius: Specifies the blur radius. Negative values are not allowed. If the blur value is zero, the shadow’s edge is sharp. Otherwise, the larger the value, the more the shadow’s edge is blurred.
  4. Spread Distance: Specifies the spread distance. Positive values cause the shadow to expand in all directions by the specified radius. Negative values cause the shadow to contract.
  5. Color: Specifies the color of the shadow. If the color is absent, the used color is taken from the ‘color’ property.
  6. 'inset': If present, the ‘inset’ keyword changes the drop shadow from an outer box-shadow (one that shadows the box onto the canvas, as if it were lifted above the canvas) to an inner box-shadow (one that shadows the canvas onto the box, as if the box were cut out of the canvas and shifted behind it).

Definitions from W3C Specification

Basic Drop Shadows

box 1

This is box1

.box1 {
   box-shadow: 5px 5px 2px 2px #666;
}

box 2

This is box2

.box2 {
   box-shadow: 10px -10px 2px 0 red;
}

Drop Shadows with Transparency

You can combine drop shadows with transparency in the color to create more realistic effects.

box 3

This is box3

.box3 {
   box-shadow: 20px 20px 4px 0 rgba(0, 0, 0, .4);
}

box 4

This is box4

.box4 {
   box-shadow: 20px 20px 4px 0 rgba(176, 224, 230, .4);
}

Inset Shadow

You can also create different effects using inset shadows.

box 5

This is box 5

.box5 {
   box-shadow: 5px 8px 20px 6px rgba(0, 0, 0, 0.2) inset;
}

Back to Week 6 page »