Learn How to Add Glow Effects Quickly and Easily With CSS3

A soft outside glow added to an element on your web page makes the element 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.

Create the Element to Glow

Glow effects work on any background, but they look best on dark backgrounds because then the glow seems to shimmer more. In a 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.

Set the Size and Color of the Element

After you choose the element you’re going to embellish with a glow, add styles to it, such as background color, size, and fonts.

This example is 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.

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 it halos the entire element without projecting the glow off one side like a shadow, 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);