X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

How to Create Fade out Text Effect with CSS

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

1. Create HTML

  • Put your text in an HTML <h1> tag.
<h1>Nature</h1>

2. Create CSS

First of all let’s style the HTML <body> tag.

  • Use the CSS margin property, which creates space around the element.
  • Put your background image with the help of CSS background-image property, using the “URL” value.
  • Define the size of the background image by using the CSS background-size property.
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%;
}

Now let’s work with the text.

  • Position the text with the help of CSS position property and some of its offset properties, such as top, right, bottom, and left.
  • Use CSS transform property, which specifies two-dimensional or three-dimensional transformation of the element, using the “translate” value to translate the text by a vector [tx, ty].
  • Use CSS margin property , which creates space around the text.
  • Put CSS padding property, which creates space around the element’s content.
  • Choose the font size and font via CSS font-size and CSS font-family properties.
  • With the help of CSS color property give your text the color you prefer.
  • You can style your text with the help of one of the values of the CSS text-transform property.
  • Use CSS transition-duration property to specify how long the transition animation of the text should take.
  • Put the CSS background-clip property, which specifies how far the background-color and background-image should be from the element, and choose the “text” value, where the background is painted within the foreground text.
h1{
position: absolute;
bottom: 70%;
left: 50%;
transform: translate(-50%,-50%);
margin: 0;
padding: 0;
font-size: 100px;
font-family: Noto, serif;
color: #fff;
text-shadow: 2px 2px #000000;
text-transform: uppercase;
transition-duration: 1s;
-webkit-background-clip: text;
}

The final step is done with the help of CSS :hover pseudo class, which will select and style our hovered text.

  • Use CSS letter-spacing property to define the spaces between letters in your text.
h1:hover{
letter-spacing: 10px;
}

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

Example

<!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: #fff;
      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>

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

Example

<!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;
      filter: alpha(opacity=60);
      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