CSS Box Shadow

Jakob Jenkov
Last update: 2014-10-13

The box-shadow CSS property can add a shadow underneath an HTML element so it looks like it is raised above the other HTML elements in the page, almost like 3D.

The box-shadow CSS property takes 5 parameters. The format looks like this:

box-shadow : inset  offsetX  offsetY  blurRadius spreadRadius shadowColor

The inset keyword is optional. If you put it in, the box shadow will be drawn inside the HTML element instead, making the HTML element look like it is pressed into the screen instead of raised up from the screen.

The offsetX and offsetY parameters specify how much the shadow is to "stick out" from the HTML element. The offsetX parameter specifies the distance along the X-axis and the offsetY specifies the distance along the Y-axis. You can use both positive and negative numbers to control where the shadow is displayed.

The blurRadius specifies how much the shadow is to be blurred. The larger a blur radius, the more blurred the box shadow will be.

The spreadRadius specifies how much the shadow should spread. You can use both a positive and negative spread radius. A negative spread radius will confine the shadow to stick out only under one of the edges of the HTML element.

The shadowColor specifies the color of the shadow. This is just a standard CSS color specified using standard CSS syntax. Note, that the blur radius impacts the real color too, by blurring the box shadow color.

Here is a CSS box shadow example:

<div style="box-shadow: 5px 5px 6px #cccccc;
       padding: 10px; border: 1px solid #eeeeee;">
    A box with a CSS box shadow
</div>

And here is a div element with the above box shadow styles applied:

A box with a CSS box shadow.



Here is an example with a negative spread radius (-6px) and 0 as offsetX:

<div style="box-shadow: 0px 8px 6px -6px #cccccc;
       padding: 10px; border: 1px solid #eeeeee;">
    A box with a CSS box shadow with negative spread radius.
</div>
A box with a CSS box shadow with negative spread radius. box shadow



Here is an example with the inset keyword added too. Notice how the box shadow is now drawn inside the HTML element in the top of the HTML element, making it look like it is pressed into the page.

<div style="box-shadow: inset 6px 6px 6px -6px #cccccc;
       padding: 10px; border: 1px solid #eeeeee;">
    A box with a CSS box shadow using inset
</div>
A box with a CSS box shadow using inset

Jakob Jenkov

Featured Videos

Java Generics

Java ForkJoinPool

P2P Networks Introduction



















Close TOC
All Tutorial Trails
All Trails
Table of contents (TOC) for this tutorial trail
Trail TOC
Table of contents (TOC) for this tutorial
Page TOC
Previous tutorial in this tutorial trail
Previous
Next tutorial in this tutorial trail
Next