How to blur a text and make it unreadable programmatically on a web page

css, javascript

Solution

Blur effect, you can do this with css:

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

DEMO Details

The following css to prevent from copying text of web page.

-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;

Demo Details

There is also another way to prevent text from copying:

<p onmousedown='return false;' onselectstart='return false;'>Lorem ipsum</p>

Demo

Update

Site Text using SVG Blur effect. Here is Details. This effect does't prevent it from coping text, reason behind you can't copy it because of there are not showing you text but these are blank spaces `&nbsp;` you can see it also using developer tool.

FEATURED DEMO

Problem

I wanna make something like this page Fonts (comments) are blurred and selectable but not pasteable. how to do something like this?

Original source

Related problems