Gradient colour on text

How do they do that cool gradient coloring effect on the text font?

They are using the mix-blend-mode property.

.mix-blend-mode .page.it-blends {
    mix-blend-mode: screen;
}
.mix-blend-mode .page.it-blends {
    background-color: #fff;
    color: #000;
}
.page {
    min-height: 100vh;
    opacity: 0.99999;
    width: 100%;
}

Robin Rendle talks about it here:
https://css-tricks.com/almanac/properties/m/mix-blend-mode/

It is not supported in IE, yet.
http://caniuse.com/#search=mix-blend-mode

For webkit only you can do something much simpler like this.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
div,h1 {
  font-size: 24px;
  background-image: -webkit-linear-gradient(right, #F37306 0%, rgba(230, 188, 136, 0.88) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  max-width:500px;
  margin:auto;
}
</style>
</head>

<body>
<h1>Webkit only</h1>
<div>Duis sit amet ex condimentum, sodales orci quis, lacinia purus. Pellentesque nunc mi, convallis non lacinia sed, efficitur commodo enim. Cras maximus dolor at libero sollicitudin, euismod tristique leo sollicitudin. In hac habitasse platea dictumst. Nam a tortor quis quam efficitur tincidunt. Proin venenatis erat vel semper elementum. Morbi condimentum libero eget vehicula vestibulum. Morbi porttitor porta eros, eget consequat felis ornare ut. Suspendisse enim elit, ornare nec ligula et, porttitor pulvinar ligula. Aliquam aliquet ut justo nec consequat. Donec sit amet justo ut dolor blandit accumsan nec vel arcu. Fusce purus erat, rhoncus sit amet risus pulvinar, malesuada viverra odio. Proin eget velit suscipit, congue erat ac, accumsan leo. Pellentesque in neque dignissim, placerat enim nec, posuere tellus. Nullam varius ac dolor ac cursus. Suspendisse ut nisl hendrerit, pharetra mi id, aliquam metus. </div>
</body>
</html>
1 Like

You can use simple jQuery plugin for that text gradient effect. Try google ‘pxgradient’, and it’s IE7+ supported. This could be animated text-mask, or you can use some abstract background image under text which is also a cool effect.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.