Colorful gradient text with CSS3



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.

Share the knowledge!
Share on Facebook0Tweet about this on Twitter0Share on Google+0Share on StumbleUpon133Share on Reddit0Share on LinkedIn21Share on TumblrBuffer this pageDigg this

Comments

You may also like...

Stay updated
Subscribe!