Add a fade out effect to the bottom of a webpage (HTML/CSS) : Add a fade out effect to a webpage. You can use this to fade text, for example. However, this example will add a fade out effect to the whole page. This example does work on mobile as well (such as Chrome on Android) and is pure CSS code, so no images are used to reduce page load times.

Add a fade out effect to the bottom of a webpage (HTML/CSS)

#fade_bottom {
position: fixed;
bottom: 0; /* top is also an option */
width:100%;
height: 5em; // or anything you want the height to be
background: -webkit-linear-gradient( /*for webkit based browsers */
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%
);
background-image: -moz-linear-gradient( /*for firefox*/
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%
);
background-image: -o-linear-gradient( /*opera browser*/
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%
);
background-image: linear-gradient(
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%
);
background-image: -ms-linear-gradient( /*microsoft ie*/
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%
);
}</style>

Now we have the style, add the following HTML div to the bottom of your page:

<div class="fadeout"></div>

It might be a good idea to consider placing this div right before your page’s footer. By doing so, you are sure this fade effect does not cover any text/information from your footer.

Tags

  • fade out effect

Tags

  • fade out at bottom of page css
  • sound effect on bottoms web