How to make Blurry Text with CSS

blur

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);
}

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.

Contact Us

Our Website Design Sevices.

Leave a Reply

Your email address will not be published. Required fields are marked *

 
Enquiry Now
iogoos-logo

Our consultants will respond back within 8 business hours or less.

X