By given a paragraph, some part of text may contain spoiler alert or not safe for work.

We can use the example below as a reference to make text blurred.

The main CSS to handle blurred effect is here:

1
2
3
4
5
6
7
8
9
10
.spoiler-blurred {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  filter: blur(0.5em);
}

.spoiler-blurred:hover {
  filter: blur(0.18em);
}

Codepen Example link: https://codepen.io/tivAgbk6frnAXaUN/pen/QWGwYop

This is the end of post