Gradient Text By CSS3

Byadmin

This is pure CSS trick, no Javascript or Flash. It works on most browsers including IE6 (PNG hack required).It is perfect for designing headings. You don’t have to render each heading with Photoshop.

This will save you time and bandwidth. You can use on any web fonts and the font size remains scalable. Gradient backgrounds started the trend, nowadays websites have more gradient colors for many elements after gradient become widely supported on modern browsers. One such aspect is styling text with gradient color. Let see it in action

h3 {
    background: linear-gradient(to right, #ff076e 0%, #005aff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    font-size: 70px;
    text-transform: uppercase;
    font-family: sans-serif;
}

 

Browser compatibility

This is only supported in WebKit based browsers. For other browsers, the color property can be the fallback option to render color related to the gradient color.
-WebKit-text-fill-color is a non-standard CSS, so have a fallback color property to support every browser without causing accessibility issues on none supported browsers.

 

Live Example