CSS: glowing text with glow very wide and high

Question

I'm investigating since some days box-shadow and text-shadow. I'm trying to gain the following effect. I want a glow come out from the text of the <a> once hovered. Simple, this should be easy as I explored using text-shadow. Ok, but it works with small glows, I mean, once the glow is bigger you just cannot see the glow due to its high blur. There has to be a solution for this. An image will explain better than 100 words.

This is what I want to gain:

LINK:

HOVER:

This is the code I've used for

#projectBox a:LINK{
    background-image: url('../_img/showcase/projectTabs/link.png');
}

#projectBox a:HOVER{
    background-image: url('../_img/showcase/projectTabs/link.png');
    color:#fa0000;
    text-shadow: 0 0 80px white;
}

I know I can use background image again for the hover but I want to avoid this. The problem is that if you add more blur it doesnt appear anymore, as its too blur. the other two properties dont help too much, as I want the glow to begin from the middle.

Lets work out this together and see how we can do with CSS a wide and high glow effect.

Answer 1

Why not use CSS3's gradients?

Take a look at this fiddle.

You can generate your own gradients here or here.