How to Create a Blurry Text in CSS

One of the best effects to stylize your text is making it appear blurred. In this snippet, we are going to show you two methods of creating a blurry text. So here we go.

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Solution with the CSS text-shadow property

The first way of creating a blurred text is making your text transparent and applying shadow to it. The shadow will make the text appear blurred. Use a <div> with an id "blur". Then, set the color property to its “transparent” value and define the text-shadow property to give a shadow to the text.

So here is the example. You can try it yourself.

Example of creating a blurry text with the text-shadow property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #blur {
        font-size: 40px;
        color: transparent;
        text-shadow: 0 0 8px #000;
      }
    </style>
  </head>
  <body>
    <div id="blur">Blurry Text</div>
  </body>
</html>

Result

Blurry Text

If you want your text to look more or less blurry, you can change the blur radius value of the text-shadow property according to the size of your text.

The method will not work in the browsers, which don’t support the text-shadow property.

Solution with the CSS filter property

Another way is using the CSS filter property with its “blur” value. The larger the value, the more blurred your text will be.

Example of creating a blurry text with the filter property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #blur {
        font-size: 40px;
        filter: blur(3px);
        -webkit-filter: blur(3px);
      }
    </style>
  </head>
  <body>
    <div id="blur">Blurry Text</div>
  </body>
</html>

You can try different blur effects, for example, you can make some letters of the text blurred and others not.

In that case, each letter must be enclosed in a <span>, so that the blurred effect and font-size can be defined for each <span> separately.

Example of creating a blurry text with some effects:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #blur {
        display: inline-block;
        padding: 20px 30px;
        margin: 20px auto;
        letter-spacing: 2px;
        background-color: #000;
      }
      #blur span:nth-child(1) {
        color: transparent;
        text-shadow: 0 0 0 #fff;
        font-size: 32px;
        font-family: 'Carme', sans-serif;
      }
      #blur span:nth-child(2) {
        color: transparent;
        text-shadow: 0 0 2px #fff;
        font-size: 35px;
        font-family: 'Carme', sans-serif;
      }
      #blur span:nth-child(3) {
        color: transparent;
        text-shadow: 0 0 2px #fff;
        font-size: 33px;
        font-family: 'Carme', sans-serif;
      }
      #blur span:nth-child(4) {
        color: transparent;
        text-shadow: 0 0 4px #fff;
        font-size: 34px;
        font-family: 'Carme', sans-serif;
      }
      #blur span:nth-child(5) {
        color: transparent;
        text-shadow: 0 0 6px #fff;
        font-size: 41px;
        font-family: 'Carme', sans-serif;
      }
      #blur span:nth-child(6) {
        color: transparent;
        text-shadow: 0 0 10px #fff;
        font-size: 40px;
        font-family: 'Carme', sans-serif;
      }
      #blur span:nth-child(7) {
        color: transparent;
        text-shadow: 0 0 8px #fff;
        font-size: 36px;
        font-family: 'Carme', sans-serif;
      }
      #blur span:nth-child(8) {
        color: transparent;
        text-shadow: 0 0 6px #fff;
        font-size: 38px;
        font-family: 'Carme', sans-serif;
      }
      #blur span:nth-child(9) {
        color: transparent;
        text-shadow: 0 0 4px #fff;
        font-size: 36px;
        font-family: 'Carme', sans-serif;
      }
      #blur span:nth-child(10) {
        color: transparent;
        text-shadow: 0 0 2px #fff;
        font-size: 34px;
        font-family: 'Carme', sans-serif;
      }
      #blur span:nth-child(11) {
        color: transparent;
        text-shadow: 0 0 0 #fff;
        font-size: 32px;
        font-family: 'Carme', sans-serif;
      }
    </style>
  </head>
  <body>
    <div id="blur">
      <span>B</span>
      <span>L</span>
      <span>U</span>
      <span>R</span>
      <span>R</span>
      <span>E</span>
      <span>D</span>
      <span>T</span>
      <span>E</span>
      <span>X</span>
      <span>T</span>
    </div>
  </body>
</html>

In the code above, each letter of the <div> acts as a <span>. We used the :nth-child() selector for selecting nth span element.