09
SEP
In just 2 small lines of CSS, you can hide/obscure paragraph text by making it look "blurry".
So without further ado, let's get right to the good stuff! Simply apply the following CSS code to any elements you want to make blurry.
color: transparent;
text-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
This will result in text that looks like this.
This is some example text. Can you read it?
Note that, based on the size of your text, you might need to make the shadow a bit bigger by increasing the "5px" on the second line. Here's an example of that.
color: transparent;
text-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px;
This font is big so I made the effect 10 pixels big instead of 5 pixels.
And if you want to make the effect a little darker, change the alpha which is the 0.5 number.
color: transparent;
text-shadow: rgba(0, 0, 0, 0.95) 0px 0px 10px;
This is 95% opacity vs. 50% as seen above.
Cool, huh? If you look at tweaks and notes above, you can see that the effect is achieved by using a clever implementation of text shadows. First let's look at the "text-shadow" line. There's 4 parts to the value of that attribute. The first value is "rgba(0, 0, 0, 0.5)" and that has 4 values itself! The rgba sets the color and the opacity of the shadow. The first three numbers there are "0,0,0" mean there's 0 red, 0 green and 0 blue. So in other words, that's black. The 0.5 value is the "alpha". That number ranges from 0 which means completely transparent and 1.0 which is completely opaque. 0.5 makes that blurry text nice and soft.
The other 3 values of text-shadow are "0px 0px 5px". The first two 0px values are the x and y position of the shadow. In this case, 0px 0px means there's no "offset" or moving of the shadow. The shadow is directly behind the text itself. The final piece of "5px" sets the size of the shadow. So all together "text-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;" simply sets a nice soft see-through shadow that acts like a "glow" around the text. And the other line "color: transparent;" makes the text transparent so all you end up seeing is this glow and the result is cool blurry text!
As far as reasons to make your text blurry, the main reason people do this is to hide text while a popup or modal window hovers over it awaiting some action. For example, if you have a website which forces users to say they're 21 years or older before they can read an article, you can obscure the text using this blur effect. Then you can pop up a little window saying "Please click OK if you're 21". And when that button is pressed, you simply need to remove the style and the website is readable again.
There are alternatives to hiding text that other websites use. Many websites, instead of actually putting the real text in the source code, they upload a photo of blurry text instead. But the cool thing about using this CSS method is, even though the text is obscured and unreadable, the source code is unchanged. This means the content of your website is the same and searchbots like Google still "see" and index the website content.
Of course there are limitations to this CSS method. The user can simply View Source and see the source code which will have the content. (At least it will also show all the HTML markup which will confuse most users). The user can also use the browser's developer tools to edit the element and remove the CSS styles. Finally, highlighting the text will also reveal it unless you apply these CSS styles in the stylesheet to the element's ::selection and ::moz-selection as well.