Glow Effects With CSS3

Add a Glow to a Web Page Element for Emphasis

A soft outside glow added to an element on your web page causes the element to stand out to the viewer. Use CSS3 and HTML to apply a glow around the outside edges of an important object. The effect is similar to an outside glow added to an object in Photoshop.

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.

In this rounded-corner rectangular box example, a DIV element is placed in another DIV element with a black background. The outer DIV is not necessary for the glow, but it’s hard to see the glow on a white background.

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

After you choose the element you’re going to embellish with a glow, go ahead and add any styles you want to it, such as background color, size and fonts. This example is for a blue rectangle; the size is set to 147px by 90px; and the background color is set to #1f5afe, a royal blue. It includes a margin to place the element in the middle of the black 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.

Because you want it to halo the entire element and not project the glow off one side like a shadow, you set the horizontal and vertical lengths to 0px. In this example, the blur radius is set to 15px and the spread of the blur is 5px, but you can fiddle with those settings to determine how wide and diffuse you want the glow to be. The color rgb(255,255,190) is a yellow color  with RGBa alpha transparency set to 75 percent—rgba(255,255,190, .75). Choose a glow color that works best for your project. As with rounding the corners, don’t forget to use the browser prefixes (–webkit– and –moz–) for the best 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); 

Test the Glowing Box

Test the glowing box in one or more browsers and make any adjustments needed to give the glow effect that works best for your web page.