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.

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

Create HTML

Put your text in an HTML <h1> tag.

<h1>Nature</h1>

Add CSS

Style the <body> tag by specifying the margin, background-image, and background-size properties.
Position the text with the help of the position, bottom, and left properties.
Use the transform property to specify two-dimensional or three-dimensional transformation of the element.
Specify the margin and padding of the text.
Choose the font size and font via the font-size and font-family properties.
Set the color of your text and also style it with the text-transform property.
Use the transition-duration property to specify how long the transition animation of the text should take.
Put the background-clip property with its “text” value, where the background is painted within the foreground text.
Use the CSS :hover pseudo-class to select and style your hovered text and then, specify the letter-spacing property.

body {
  margin: 0;
  background: url('/uploads/media/default/0001/05/a75f5ca313293313060175d0cc69303d2268d6fa.jpeg');
  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('/uploads/media/default/0001/05/a75f5ca313293313060175d0cc69303d2268d6fa.jpeg');
        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>

Try it Yourself »

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>