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.
Here’s a simple example to illustrate how
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:
Easy enough. This is what we’ll be building upon.
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.
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:
0 0 60px 30px #fff, /* inner white */
0 0 100px 60px #f0f, /* middle magenta */
0 0 140px 90px #0ff; /* outer cyan */
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):
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:
border: solid 2px #fff;
inset 60px 0 120px #f0f, /* left magenta */
inset -60px 0 120px #0ff; /* right cyan */
Gives us this:
Now let’s combine all these techniques to create a glowing translucent marble. Here’s the CSS:
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:
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!