How to Add a Fade out Text Effect with CSS

Using some effects for your text makes your Website more attractive and exciting. However, the uniqueness and creativeness of these effects are important too. By reading this snippet, you will learn how to create a very imaginative effect and give your Website an original style.

Create HTML

<h1>Nature</h1>

Add CSS

body {
  margin: 0;
  background: url('https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp- 
 content/uploads/sites/6/2017/11/04133712/waterfall.jpg');
  background-size: 160%;
}

h1 {
  position: absolute;
  bottom: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0;
  font-size: 100px;
  font-family: Noto, serif;
  color: #ffffff;
  text-shadow: 2px 2px #000000;
  text-transform: uppercase;
  transition-duration: 1s;
  -webkit-background-clip: text;
}

h1:hover {
  letter-spacing: 10px;
}

Now, we can bring all the above together and try some examples.

Example of creating a fade out text effect:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        margin: 0;
        background: url('https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/sites/6/2017/11/04133712/waterfall.jpg');
        background-size: 160%;
      }
      h1 {
        position: absolute;
        bottom: 70%;
        left: 50%;
        transform: translate(-50%, -50%);
        margin: 0;
        padding: 0;
        font-size: 100px;
        font-family: Noto, serif;
        color: #ffffff;
        text-shadow: 2px 2px #000000;
        text-transform: uppercase;
        transition-duration: 1s;
        -webkit-background-clip: text;
      }
      h1:hover {
        letter-spacing: 10px;
      }
    </style>
  </head>
  <body>
    <h1>Nature</h1>
  </body>
</html>

Result

Nature

If you want your text to look more beautiful, you can make it transparent with the help of the CSS opacity property.

Example of creating a fade out effect with transparent text:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        background: url('https://dbjz9ypka0tyx.cloudfront.net/app/uploads/2019/04/29135054/img-visual-01.jpg');
        background-size: 230%;
      }
      h1 {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        margin: 0;
        padding: 0;
        font-size: 100px;
        color: #FFFFFF;
        text-shadow: 2px 2px #F4A460;
        font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
        text-transform: uppercase;
        transition: 0.5s;
        opacity: 0.6;
        -webkit-background-clip: text;
      }
      h1:hover {
        letter-spacing: 10px;
      }
    </style>
  </head>
  <body>
    <h1>Fashion</h1>
  </body>
</html>

Do you find this helpful?

Related articles