Colorful gradient text with CSS3

by Creative Punch · February 2, 2014

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!