CODEWITHSUNDEEP
htmlcss
user1830210
user1830210

Reputation: 31

Html css blur effect in divs

I am developing a website but there is a problem ,there is need of Gaussian blur in a div, I can do change the opacity but not able to make the text blur in that.

Please help me

<html>
   <body>
      <div id="blur" style="">hellokkksdjfdshfshifsd isjfcsdkcjsdlk</div>
    </body>
</html>

Upvotes: 1

Views: 5318

Answers (3)

migkapa
migkapa

Reputation: 31

You can place the following code in your style file 

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

or just place

color: transparent; text-shadow: 0 0 5px rgba(0,0,0,0.5);

in style="" tag.

the 0.5 is the opacity ratio, and the 0,0,0 are the rgb color values .

Upvotes: 0

Tom Walters
Tom Walters

Reputation: 15616

I'd suggest using text-shadow here like so:

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

Example Fiddle

Upvotes: 1

geekman
geekman

Reputation: 2244

Not Possible directly, though can be achieved using css text-shadow. The trick is to make the text transparent and then give it a shadow

Selectortoblurtext
{
color: transparent;
text-shadow: 0 0 5px #000000;
}

Try different combinations in shadow!!

Upvotes: 3

Related Questions