Box-shadow Fun

The CSS box-shadow property has more versatility than a person might think just looking at it.

The shadow can be of various colors and widths and blurs. The shadow can be put on the outside of a div (or other HTML box, like a <p> or <pre> tag) or along the inside edge of the box (or both). It can be shifted so one or two sides get more shadow than the rest. Multiple shadows can be specified.

It can be a lot of fun to play with. Well, for a techie like me it's a lot of fun.

If it's fun for you, too, read on.

This article has illustrations but no generator. Use the CSS Shadow Code Generator for that, which makes it easy to generate shadow code. Type values in a form and the generator will show the effect.

The generator article also has box-shadow fun ideas.

Depending on your experience with the box-shadow property, some parts of this article may contain information you are already well versed in. Here is a list of links to sections you can jump to directly.

Property Details
Circle and Oval Illustrations
Multi-shadow Illustrations

Property Details

The box-shadow property can have up to six values. Two are required.

Here is an example declaration with values:

box-shadow: 3px -3px 12px 6px #999 inset;

This declaration has property placeholders. The placeholders are defined below.

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

Notes about the box-shadow value placeholders:

• horizontal-offset (required)

  The value moves the shadow horizontally by the specified amount. The specified value may be (0) zero.

  A positive value moves the shadow toward the right. 9px moves the shadow 9 pixels toward the right. Example shadow outside the box and an example inset shadow:

  A negative value moves the shadow toward the left. -9px moves the shadow 9 pixels toward the left. Example shadow outside the box and an example inset shadow:

• vertical-offset (required)

  The value moves the shadow vertically by the specified amount. The specified value may be (0) zero.

  A positive value moves the shadow down. 9px moves the shadow 9 pixels down. Example shadow outside the box and an example inset shadow:

  A negative value moves the shadow up. -9px moves the shadow 9 pixels up. Example shadow outside the box and an example inset shadow:

  Both horizontal and vertical — When both the horizontal and vertical values are positive 9px, this is what you get.

  When both the horizontal and vertical values are negative 9px, this is what you get.

  The horizontal and vertical values may be mixed, one positive and the other negative, with different values or even value (0) zero.

• blur (optional)

  This specifies the blur radius. The larger the specified radius value the more blurred the shadow will be.

  These examples have blur values of 0, 3px, and 12px:

• spread (optional)

  This specifies the spread amount. When (0) zero is specified, the shadow size remains as it is otherwise specified. When a positive spread amount is specified, the shadow size increases by that amount. When a negative spread amount is specified, the shadow decreases by that amount.

  These examples have spread values of 12px, 3px, 0, -3px, and -12px:

• color (optional)

  The color can be specified. This example has color #99f specified with a blur of 6px, a spread of 0, and 9px for both horizontal and vertical offsets.

• inset (optional)

  The inset value causes the shadow to be inside the border of the box instead of outside. This example is identical to the color example except inset is specified.

One more thing you're going to want to know: You can specify more than one value set for the box-shadow property. Simply separate each set with a comma. An illustration of this technique is in the Multi-shadow Illustrations section.

Circle and Oval Illustrations

These can be a lot of fun.

Let's make an icon to suggest a science-fiction worm-hole through space.

Here is the source code for the worm-hole icon.

<div style="
    position:relative;
    width:100px; height:100px;
    border:none;
    border-radius:50% 50%;
    box-shadow: 0 0 25px 12px #000 inset;
">
    <div style="
        position:absolute;
        top:49px;
        left:49px;
        width:5px; height:5px;
        border:none;
        border-radius:50% 50%;
        box-shadow: 0 0 15px 9px #f00;
    "></div>
</div>

Let's do a smiley face in a glow.

Here is the source code for the smiley. You'll notice that the nose and mouth are ovals, the rest circles. The difference is in the div dimensions. When the height and width are equal, it makes a circle. Otherwise, an oval.

<div style="
    position:relative;
    width:100px; height:100px;
    border:none;
    border-radius:50% 50%;
    box-shadow: 0 0 25px 0 #ff0;
">
    <!-- (left eye) -->
    <div style="
        position:absolute;
        top:35px;
        left:25px;
        width:20px; height:20px;
        border:none;
        border-radius:50% 50%;
        box-shadow: 0 0 3px 0 #00f inset;
    "></div>
    <!-- (right eye) -->
    <div style="
        position:absolute;
        top:35px;
        right:25px;
        width:20px; height:20px;
        border:none;
        border-radius:50% 50%;
        box-shadow: 0 0 3px 0 #00f inset;
    "></div>
    <!-- (nose) -->
    <div style="
        position:absolute;
        top:45px;
        left:40px;
        width:20px; height:30px;
        border:none;
        border-radius:50% 50%;
        box-shadow: 0 3px 3px -2px #00f;
    "></div>
    <!-- (mouth) -->
    <div style="
        position:absolute;
        top:65px;
        left:20px;
        width:60px; height:20px;
        border:none;
        border-radius:50% 50%;
        box-shadow: 0 5px 9px -6px #00f;
    "></div>
</div>

This is too much fun. Tech stuff is supposed to be serious.

Let's move on to the next section.

Multi-shadow Illustrations

These illustrations are of an oval with more and more shadows piled on. Each illustration is followed immediately with the source code used to create it.

Here is the oval with a blue shadow around it.

<div style="
    width:200px; height:50px;
    border:none;
    border-radius:50% 50%;
    box-shadow: 0 0 6px 1px #99f;
">
</div>

Here is the same oval but with the addition of a green shadow inside the border.

<div style="
    width:200px; height:50px;
    border:none;
    border-radius:50% 50%;
    box-shadow: 0 0 6px 1px #99f, 0 0 6px 1px #0f0 inset;
">
</div>

In the code you'll see both shadow value sets, separated with a comma.

Here, the oval has a blurred       inset shadow and two shadows around the outside. You see the blurred       shadow blending into the blurred       shadow. The amount of blending and separation can be modified with the blur and spread values for the two outside shadows.

<div style="
    width:200px; height:50px;
    border:none;
    border-radius:50% 50%;
    box-shadow: 0 0 12px 5px #36f, 0 0 12px 10px #6f0, 0 0 6px 1px #000 inset;
">
</div>

The code shows the three shadow value sets used for the illustration, the sets separated with a comma.

Let the illustrations be a start for you to have much fun with shadows.

The CSS Shadow Code Generator can be used to quickly test different values for blur and spread and other parts of the CSS box-shadow property value.

(This article first appeared in Possibilities newsletter.)

Will Bontrager