Html css blur effect in divs

Question

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>

Try this method http://css-tricks.com/fun-with-blurred-text/ — ShibinRagh, Dec 28 '12 at 09:52
Using HTML5 and CSS3, your answer is here: http://stackoverflow.com/questions/8514954/blur-imgs-divs-in-html-using-css — Ricain, Dec 28 '12 at 09:55
Does this answer your question? [How to apply a CSS filter to a background image](https://stackoverflow.com/questions/20039765/how-to-apply-a-css-filter-to-a-background-image) — Quinn Keaveney, Jun 05 '21 at 19:59

score 3 · Accepted Answer · answered Dec 28 '12 at 09:52

3

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!!

answered Dec 28 '12 at 09:52

geekman

2,224
13
17

score 1 · Answer 2 · answered Dec 28 '12 at 09:52

1

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

answered Dec 28 '12 at 09:52

Tom Walters

15,366
7
57
74

score 0 · Answer 3 · answered Dec 28 '12 at 10:08

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 .

Html css blur effect in divs

3 Answers3