Use text-shadow to blur text in CSS

You, css
Back

🤔 Problem

Let's say that we need to blur a customer's name for an app screenshot or demo.

Here's our example :

Not blurred bio

So, how can we add some blur using the text-shadow CSS property?

Solution

Define a blurred-text class in our CSS file:

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

And then apply to the HTML element:

<span className="blurred-text">Sam Jones</span>

Here we have the blurred text on our site:

Blurred bio

You can also increase/decrease the blur-radius value (e.g. from 7px to 5px) to change the transparency.

💡 Extra Tip

If you need to blur the text inside an input field, you can use the following class:

.blur-on-lose-focus:not(:focus) {
  color: transparent;
  text-shadow: 0 0 7px rgba(0, 0, 0, 0.5);
}

And it will look something like this:

Blurred input

© Samuel Jones.RSS