<a href="#" class="glow">Glowing Link</a>
Our first CSS3 declaration defines the initial state and the vendor-prefixed transition properties. The transition starts immediately and lasts for half a second. I found “linear” timing produced the most natural effect, but you can experiment with others (ease, ease-in, ease-out, ease-in-out, cubic-bezier):
a.glow, a.glow:hover, a.glow:focus
{
text-decoration: none;
color: #aaf;
text-shadow: none;
-webkit-transition: 500ms linear 0s;
-moz-transition: 500ms linear 0s;
-o-transition: 500ms linear 0s;
transition: 500ms linear 0s;
outline: 0 none;
}
We can now define the glowing text properties. I found that a single text-shadow such as 0 0 8px #fff was a little too subtle. Two shadows produced a better result — one white and one bright yellow at slightly different offsets:
a.glow:hover, a.glow:focus
{
color: #fff;
text-shadow: -1px 1px 8px #ffc, 1px -1px 8px #fff;
}
View the glowing links demonstration page
. The source contains all the code and I recommend you experiment with different animation and text-shadow properties.
if (document.createElement("detect").style.textShadow === "") {
document.getElementsByTagName("html")[0].className += " textshadow";
}
Have fun with the technique. Please leave your comments and a URL if you create a nice effect on your site.
Frequently Asked Questions (FAQs) about CSS3 Glowing Link Effect
How can I make the glow effect more prominent in CSS3?
To make the glow effect more prominent, you can adjust the ‘box-shadow’ property in your CSS code. The box-shadow property allows you to apply a shadow effect to the border of an element. You can increase the blur radius or spread radius to make the glow effect more prominent. For example, you can use the following code:a {
box-shadow: 0 0 10px #09f;
}
In this code, ‘0 0′ represents the horizontal and vertical offsets of the shadow, ’10px’ is the blur radius, and ‘#09f’ is the color of the shadow. You can adjust these values to achieve the desired glow effect.
Can I apply the glow effect to other elements besides links?
Yes, the glow effect can be applied to any HTML element, not just links. You can apply it to divs, images, buttons, etc. You just need to replace the ‘a’ in the CSS code with the selector of the element you want to apply the glow effect to. For example, to apply the glow effect to a button, you can use the following code:button {
box-shadow: 0 0 10px #09f;
}
In this code, ‘button’ is the selector of the button element.
How can I change the color of the glow effect?
The color of the glow effect can be changed by adjusting the color value in the ‘box-shadow’ property. The color value can be a hexadecimal color, a RGB color, or a named color. For example, to change the glow color to red, you can use the following code:a {
box-shadow: 0 0 10px red;
}
In this code, ‘red’ is the color of the glow effect.
Can I apply multiple glow effects to the same element?
Yes, you can apply multiple glow effects to the same element by specifying multiple box-shadow properties separated by commas. Each box-shadow property will create a separate glow effect. For example, to apply two glow effects to a link, you can use the following code:a {
box-shadow: 0 0 10px red, 0 0 20px blue;
}
In this code, the link will have a red glow with a blur radius of 10px and a blue glow with a blur radius of 20px.
How can I make the glow effect appear on hover?
To make the glow effect appear on hover, you can use the ‘:hover’ pseudo-class in your CSS code. The ‘:hover’ pseudo-class selects an element when the user’s pointer is over it. For example, to apply the glow effect to a link only when it is hovered over, you can use the following code:a:hover {
box-shadow: 0 0 10px #09f;
}
In this code, the glow effect will only appear when the link is hovered over.
Can I animate the glow effect?
Yes, you can animate the glow effect using CSS animations or transitions. For example, you can use the ‘transition’ property to animate the change in box-shadow when a link is hovered over. Here’s an example:a {
transition: box-shadow 0.3s ease;
}
a:hover {
box-shadow: 0 0 10px #09f;
}
In this code, the glow effect will gradually appear over a duration of 0.3 seconds when the link is hovered over.
How can I apply the glow effect to text?
To apply the glow effect to text, you can use the ‘text-shadow’ property instead of the ‘box-shadow’ property. The ‘text-shadow’ property works similarly to the ‘box-shadow’ property, but it applies the shadow to the text of an element instead of the border. Here’s an example:a {
text-shadow: 0 0 10px #09f;
}
In this code, the text of the link will have a glow effect.
Can I apply the glow effect to an image?
Yes, you can apply the glow effect to an image by using the ‘box-shadow’ property on the ‘img’ selector. Here’s an example:img {
box-shadow: 0 0 10px #09f;
}
In this code, the image will have a glow effect.
How can I make the glow effect pulsate?
To make the glow effect pulsate, you can use CSS animations. You can create a keyframes animation that changes the box-shadow property over time, and then apply this animation to your element. Here’s an example:@keyframes pulsate {
0% { box-shadow: 0 0 10px #09f; }
50% { box-shadow: 0 0 20px #09f, 0 0 30px #09f; }
100% { box-shadow: 0 0 10px #09f; }
}
a {
animation: pulsate 1s infinite;
}
In this code, the glow effect will pulsate every second.
Can I apply the glow effect to a specific side of an element?
The box-shadow property applies the shadow to all sides of an element. However, you can create the illusion of a shadow on a specific side by using large offsets and negative spread values. This requires some experimentation and may not work perfectly for all shapes and sizes of elements.
Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.