Glow Effects with CSS3

01
of 01
Create an Outer Glow with CSS3 and No Graphics

An outer glow effect done in Photoshop
An outer glow effect done in Photoshop. Image courtesy J Kyrnin

One interesting effect that you may have seen in graphics is the glow effect. You can see what I mean by a glow effect in the image above. That image was created in Photoshop, but it is possible to create an outer glow effect on a web page using just CSS3 and HTML.

First Create the Element to Glow

Glow effects can be done on any color background, but they look best on dark backgrounds because then the glow seems to shimmer more. For my example, I used a element that I placed in another DIV element with a black background. The outer DIV is not necessary for the glow, I just used it because About.com pages have a white background, and it’s hard to see the glow on white.

Give the DIV a class of glow:

<div style="width:200px; height:100px; margin-left: auto; margin-right: auto; margin-top: 20px; padding: 20px; text-align: center; background-color: #000;">
  <div class="glow"></div>
</div>

Set the Size and Color of the Element

Once you know what element you’re going to add the glow to, you should add any styles you want to it, like background color, size, fonts, etc. Since I’m just trying to replicate the blue rectangle above, I set the size to 147px by 90px and the background color to #1f5afe (royal blue). I also gave it a margin to place it in the middle of the container element.

<style>
.glow {
  margin: auto;
  width: 147px;
  height: 90px;
  background-color: #1f5afe;
}
</style>

Round the Corners

Creating a rectangle with rounded corners is easy with CSS3. Add the border-radius style property to your glow class. Just remember to use the -webkit- and -moz- prefixes for the highest compatibility.

-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;

Add the Glow with a Box Shadow

The glow itself is created with a box shadow. Only because you want it to halo the entire element (not project off one side like a shadow) you set the horizontal and vertical lengths to 0px. I set the blur radius to 15px and the spread of the blur to 5px, but you can fiddle with those to determine how wide and diffuse you want your glow to be. For the color, I used a yellow color (rgb(255,255,190)) and used RGBa to set the alpha transparency to 75% (rgba(255,255,190, .75)). Choose a glow color that works best for your project. And as with rounding the corners, don’t forget to use the browser prefixes (-webkit- and -moz-) for the most compatibility.

-webkit-box-shadow: 0px 0px 15px 5px rgba(255, 255, 190, .75);
-moz-box-shadow: 0px 0px 15px 5px rgba(255, 255, 190, .75);
box-shadow: 0px 0px 15px 5px rgba(255, 255, 190, .75);

Finally, Test Your Glowing Box

You can see my glow effect example in action on my examples pages. The effect is nearly identical to the Photoshop image.