CSS Glow Effect

The CSS box-shadow property can help you to create a CSS glow effect on just about any HTML element. This particular glow effect applies to boxes. A similar effect that applies to text (which appears to glow each letter) would need layered text shadows.

Here is the syntax followed by a demo and quick breakdown:

.glow {
  box-shadow: rgba(72, 135, 202, 0.8) 0 0 90px 33px;
}
Code language: CSS (css)

Note that the effectiveness of the glow depends on the background color the glow appears on. Most realistic glow effects require a dark background, but you can achieve a similar effect using a light background by tweaking the values.

• The first value is the color of the “glow” (i.e. the “shadow” color); this example uses rgba notation but other formats are also possible as long as opacity is used
• The syntax and value for the opacity setting will depend on the color format used, which you can adjust as needed
• The first two “0” values are the vertical and horizontal offsets, which should stay at 0 so the glow appears to come from the center
• The third value is the “blur” radius, which you can adjust as needed, though higher values are better for a nicer glow
• The fourth value is the “spread” distance, which determines how far the glow appears around the element