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
rgbanotation 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
You can see the CSS glow effect in the CodePen demo below. Feel free to adjust the values, including the color of the glow, to try different glow styles.
