Creating Glow Effects with CSS

The CSS box-shadow property is deceptively awesome. When used “traditionally”, it’s a simple way to add a shadow effect to an element. I use this for images in my blog. It’s nice. But get saucier with it and you can pull off some really interesting things. I’ve already talked about the pixel art hack. This time I’m going to share how to create colorful glow effects.

The Basics

Here’s a simple example to illustrate how box-shadow works:

div {
    width: 150px;
    height: 150px;
    background-color: #fff;

    box-shadow: 120px 80px 40px 20px #0ff;
    /* in order: x offset, y offset, blur size, spread size, color */
    /* blur size and spread size are optional (they default to 0) */
}

And here’s a diagram of the result:

box-shadow diagram

Easy enough. This is what we’ll be building upon.

Browser Support

Let’s pause for a moment to talk about browser support for box-shadow. Thankfully, it’s pretty good. IE9+ and all the other major browsers support it unprefixed. However, the blur value seems to be applied inconsistently across browsers. Chrome in particular renders it at about half the size you would expect. Not a showstopper, but something to be aware of.

Circles and Stacking

box-shadow takes the shape of the element it’s on. If we make an element round with border-radius: 50%, then box-shadow will follow suit.

We can stack multiple glow effects on an element by giving box-shadow multiple sets of values, separated by commas. The glow effects will be stacked with first on top, last on bottom.

Alright, let’s try these 2 techniques together:

div {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #fff;
    box-shadow:
        0 0 60px 30px #fff,  /* inner white */
        0 0 100px 60px #f0f, /* middle magenta */
        0 0 140px 90px #0ff; /* outer cyan */
}

The result:

See the Pen Circles and Stacking by Will Boyd (@lonekorean) on CodePen.

Not bad! At this point you already know enough to make some impressive visuals. As an example, here’s what you can make by adding a little bit of animation to the box-shadow techniques already covered (you can click the circles, too):

See the Pen Pretty Colors by Will Boyd (@lonekorean) on CodePen.

Insets and Offsets

Now let’s play with inset glows. By adding inset to your box-shadow declaration, you can change it from an outer glow to an inner glow. Combine this with x/y offset values to create an effect where a color is glowing inward from one side. Applying this CSS:

div {
    width: 400px;
    height: 200px;
    background-color: #fff;
    border: solid 2px #fff;
    box-shadow:
        inset 60px 0 120px #f0f,  /* left magenta */
        inset -60px 0 120px #0ff; /* right cyan */
}

Gives us this:

See the Pen Insets and Offsets by Will Boyd (@lonekorean) on CodePen.

Putting It All Together

Now let’s combine all these techniques to create a glowing translucent marble. Here’s the CSS:

div {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    box-shadow:
        inset 0 0 50px #fff,      /* inner white */
        inset 20px 0 80px #f0f,   /* inner left magenta short */
        inset -20px 0 80px #0ff,  /* inner right cyan short */
        inset 20px 0 300px #f0f,  /* inner left magenta broad */
        inset -20px 0 300px #0ff, /* inner right cyan broad */
        0 0 50px #fff,            /* outer white */
        -10px 0 80px #f0f,        /* outer left magenta */
        10px 0 80px #0ff;         /* outer right cyan */
}

And here’s the final result:

See the Pen Glowing Translucent Marble by Will Boyd (@lonekorean) on CodePen.

Pretty nice for just a few lines of CSS, eh? There’s more that can be done, but this is a good start. Now go forth and create shiny, glowing, colorful things!

Hey, you reached the end!

Feel free to check out my other blog posts or subscribe to my RSS feed. You can also click a tag below to see related blog posts.