CSS Text Glow on Hover with Transition Effects

CSS Text Glow: The technique here is to have a dark color for background and a lighter color for the glow. Text-shadow gives it the illusion of glowing. Text-shadow accepts 4 values in this order: 1. X-Coordinate of the shadow, relative to the text (0). 2. Y-Coordinate of the shadow, relative to the text (0). 3. Blur radius defines how fuzzy the shadow should be. (10px) 4. Color of the shadow (#fff).

CSS Text Glow on Hover: In this example, when the mouse is moved, the text glows. The secret is to place the text-shadow under :hover option.

CSS Text Glow on Hover with a delayed Effect: This example is the same as the one above, except that it has that delay in glowing. We create this effect using CSS3 transitions. In this example, we are using transition effect which has 2 values, text-shadow(what we want to delay) and the number of seconds the delay should take effect(in this case 3s – 3 seconds).


Rate this post