Is it possible to set horizontal gradient to text via CSS? (left letter one colour, right - another colour)

Question

Is it possible to set horizontal gradient to text via CSS? (left letter one colour, right - another colour).

kind user · Accepted Answer · 2016-10-05T21:59:44.417

22

Yes, it is.

h1 {
  font-size: 72px;
   background: -webkit-linear-gradient(left, red , yellow);
   background: -o-linear-gradient(right, red, yellow);
   background: -moz-linear-gradient(right, red, yellow);
   background: linear-gradient(to right, red , yellow); 
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<h1>Hello World</h1>

edited Oct 05 '16 at 21:59

answered Oct 05 '16 at 21:54

kind user

40,029
7
67
77

Thanks a lot) Is it cross browser compatible? – Roman Gryndii Oct 05 '16 at 21:57
Depends if you support IE8 or earlier , http://caniuse.com/#feat=background-img-opts – Jon P Oct 05 '16 at 22:00
to increase browser compatibility, you may use mix-blend-mode , example http://codepen.io/gc-nomade/pen/ZWMxdL, else for a full compatibility, actually an image is the only way .... – G-Cyrillus Oct 05 '16 at 22:01
`mix-blend-mode` support: https://caniuse.com/#search=mix-blend-mode – mrienstra Jun 17 '19 at 15:54

Is it possible to set horizontal gradient to text via CSS? (left letter one colour, right - another colour)

1 Answers1

Linked