This will be a really short article because this effect is really quick and easy. I will show you how you can easily make a colorful gradient text effect with CSS3’s background-clip and text-fill-color properties.
Please note that currently this method currently works only in webkit browsers.
See the Pen Gradient text with CSS3 by Creative Punch (@CreativePunch) on CodePen.
This demo uses only an h1 element with the following CSS:
h1 { display: table; margin: 0 auto; font-family: "Roboto Slab"; font-weight: 400; font-size: 6em; background: linear-gradient(330deg, #e05252 0%, #99e052 25%, #52e0e0 50%, #9952e0 75%, #e05252 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; line-height: 200px; }
The key in this example are the following lines:
background: linear-gradient(330deg, #e05252 0%, #99e052 25%, #52e0e0 50%, #9952e0 75%, #e05252 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
We added a colorful gradient and subsequently make the text transparent, and use background-clip to make sure the background is masked by the text. This means that the background will only be visible where the (now transparent) text is.