totn CSS

CSS: box-shadow property

This CSS tutorial explains how to use the CSS property called box-shadow with syntax and examples.

Description

The CSS box-shadow property defines shadow effects for an element.

Syntax

The syntax for the box-shadow CSS property is:

box-shadow: none;

OR

box-shadow: [inset] offset-x offset-y [blur-radius] [spread-radius] color;

Parameters or Arguments

inset

Optional keyword. It is the type of shadow to apply to the element. It can be one of the following:

Value Description
inset Shadow is displayed as an inset shadow

Example below shows inset, offset-x, offset-y and color
div { box-shadow: inset 2px 2px #CCCCCC; }
<omitted> Shadow is displayed as a drop shadow

Example below shows offset-x, offset-y and color
div { box-shadow: 2px 2px #CCCCCC; }
offset-x

Required. It is the horizontal distance that can be either a positive or negative value. If offset-x is a negative value, the shadow will be placed to the left of the element. It can be one of the following:

Value Description
fixed Fixed value expressed in px, em, ...

Example below shows offset-x, offset-y and color
div { box-shadow: 2px 3px black; }
offset-y

Required. It is the vertical distance that can be either a positive or negative value. If offset-y is a negative value, the shadow will be placed above the element. It can be one of the following:

Value Description
fixed Fixed value expressed in px, em, ...

Example below shows offset-x, offset-y and color
div { box-shadow: 3px 1px red; }
blur-radius

Optional and can not be a negative value. The larger the blur-radius value, the bigger the blur. It can be one of the following:

Value Description
fixed Fixed value expressed in px, em, ...

Example below shows offset-x, offset-y, blur-radius and color
div { box-shadow: 3px 1px 2px #F5F5F5; }
spread-radius

Optional. It can be either a positive or negative value. A positive spread-radius value will cause the shadow grow bigger. A negative spread-radius will cause the shadow to shrink. It can be one of the following:

Value Description
fixed Fixed value expressed in px, em, ...

Example below shows offset-x, offset-y, blur-radius, spread-radius and color
div { box-shadow: 2px 2px 3px 1px black; }
color

Optional, but if omitted the box-shadow will not appear. color is the color of the box-shadow and can be one of the following:

Value Description
#RRGGBB Hexadecimal representation of the color

Example below shows offset-x, offset-y and color
div { box-shadow: 2px 2px #FF0000; }
rgb() RGB representation of the color

Example below shows offset-x, offset-y and color
div { box-shadow: 2px 2px rgb(255,0,0); }
name Name of the color (ie: red, blue, black, white)

Example below shows offset-x, offset-y and color
div { box-shadow: 2px 2px red; }

Note

  • The offset-x and offset-y values are required for the CSS box-shadow property.
  • The color value is not required, but since the default for the box-shadow is transparent, the box-shadow will not appear unless you specify a color value.
  • The larger the blur-radius value, the bigger the blur. The blur-radius value can not be negative.
  • A positive spread-radius value will cause the shadow to grow bigger. A negative spread-radius will cause the shadow to shrink.
  • Need to convert your color value to a different representation? Try this online tool to convert your color value between hexadecimal and RGB.

Browser Compatibility

The CSS box-shadow property has basic support with the following browsers:

  • Chrome 10+
  • Firefox 4+ (Gecko 2+)
  • Internet Explorer 9+ (IE 9+)
  • Opera 10.5+
  • Safari 5.1+ (WebKit 3+)

Example

We will discuss the box-shadow property below, exploring examples of how to use this property in CSS.

Using Drop Shadow

Let's look at a CSS box-shadow example to show how to create a drop shadow.

div { box-shadow: 2px 3px #CCCCCC; }

In this CSS box-shadow example, we have created a drop shadow by setting the box-shadow property for the <div> tag. The offset-x value is set to 2px, the offset-y value is set to 3px and the color is set to #CCCCCC.

Next, let's add the blur-radius to our box-shadow:

div { box-shadow: 2px 3px 5px #CCCCCC; }

In this CSS box-shadow example, we have created a drop shadow by setting the box-shadow property for the <div> tag. The offset-x value is set to 2px, the offset-y value is set to 3px, the blur-radius is set to 5px, and the color is set to #CCCCCC.

Using Inset Shadow

Let's look at a CSS box-shadow example to show how to create an inset shadow (ie: content looks like it is depressed inside the box).

div { box-shadow: inset 2px 3px #CCCCCC; }

In this CSS box-shadow example, we have created an inset shadow by setting the box-shadow property for the <div> tag. First of all, the inset keyword is used. Then the offset-x value is set to 2px, the offset-y value is set to 3px and the color is set to #CCCCCC.

Next, let's add the blur-radius to our box-shadow:

div { box-shadow: inset 2px 3px 5px #CCCCCC; }

In this CSS box-shadow example, we have created an inset shadow by setting the box-shadow property for the <div> tag. Again, the inset keyword is used. Then the offset-x value is set to 2px, the offset-y value is set to 3px, the blur-radius is set to 5px, and the color is set to #CCCCCC.

Using No Shadow

Let's look at a CSS box-shadow example where we remove a box-shadow.

div { box-shadow: none; }

In this CSS box-shadow example, we have removed the shadow effect by setting the box-shadow property to none for the <div> tag.

Share on: