How to make Blurry Text with CSS

Its pretty easy to make some blurry text with CSS. We can do it by just making the text color transparent and adding some text shadow. Here’s the code for the same:

Blurry Text with CSS

To do it on the normal text we can create a class and use SPAN tag to make the text blurry.

Example: This text will be blurry!

HTML Code

<span >This text will be blurry!</span>

CSS Code

.blur{
    color: transparent;
    text-shadow: 0 0 3px rgba( 0, 0, 0, 0.5);
}

Blurry Text Links on Hover

We can make the links blurry on hover by adding the blurry styles on a: hover pseudo-class.

<a href="" title="">This link text will be blurry on hover.</a>

a.blurry-links{
    color:red;
}
a.blurry-links:hover{
    color: transparent;
    text-shadow: 0 0 3px rgba( 0, 0, 0, 0.5);
}

You can always change the RGB values and the opacity for the text-shadow property and have the blurry text in a different colors.

Our Website Design Sevices.