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

Put your text in an HTML <h1> tag.

How to use 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 <span class="property">margin</span> 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 property to specify how long the transition animation of the text should take.
Set the initial opacity to 1 and change it to 0 on hover to create the fade-out effect.
Use the CSS :hover pseudo-class to select and style your hovered text and then, specify the letter-spacing property.

How to style an HTML <h1> tag using CSS position, bottom, left, transform, margin, padding, font-size, font-family, color, text-shadow, text-transform, transition, and opacity properties?

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: opacity 1s;
  opacity: 1;
}

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

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

Example of creating a fade out text effect:

An example of how to create fade out text effect with CSS

<!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: opacity 1s;
        opacity: 1;
      }
      h1:hover {
        opacity: 0;
        letter-spacing: 10px;
      }
    </style>
  </head>
  <body>
    <h1>Nature</h1>
  </body>
</html>

Try it Yourself »

Result

<div class="demo mb-5 px-2.5">Result: Nature</div>

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:

An example of how to create fade out text effect with the help of CSS transition and opacity properties.

<!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: opacity 0.5s;
        opacity: 1;
      }
      h1:hover {
        opacity: 0;
        letter-spacing: 10px;
      }
    </style>
  </head>
  <body>
    <h1>Fashion</h1>
  </body>
</html>

Try it Yourself »