CSS Fade Out Text Effects

Share on facebook
Facebook
Share on google
Google+
Share on twitter
Twitter
Share on linkedin
LinkedIn

A very simple animation to add in some section of your website that will give you an excellent presentation with CSS fade out text effects.

Below you can find the code for css fade out effect

HTML

<h1>Mountain</h1>

CSS

body 
{ 
     background: url(YOUR IMAGE URL); 
     background-size: cover; 
     margin: 0; 
     padding: 0 
} 

h1 
{ 
     background: linear-gradient(rgba(255,255,255,1) 20%, transparent 80%);
     -webkit-background-clip: text; 
     -webkit-text-fill-color: transparent; 
     color: #fff; 
     font-size: 12em; 
     font-family: sans-serif; 
     left: 50%; 
     margin: 0; 
     padding: 0; 
     position: absolute; 
     top: 50%; 
     transform: translate(-50%,-50%); 
     text-transform: uppercase; 
     transition: 0.5s 
} 

h1:hover { letter-spacing: 20px }

Enjoy this great degraded text for your pages.

More to explorer

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.