Text with a gradient!

Having text with a gradient is a cool effect you can use to make your website headers look better. Take a look at my header above.

This is actually pretty easy. Example code to have text with a gradient is:

h1{
  background-image: linear-gradient(to right, red, black);
  -webkit-background-clip: text;
  color: transparent;
}

The way this works is the background-image sets a linear gradient. You set the direction of the gradient and then the first color and final color.

The magic part is -webkit-background-clip: text so that the background is clipped to the text. If you didn't have this then the background gradient will apply to the entire block and not just the text.

Finally, you set the color of the text to transparent so that it uses the background gradient color. If you don't set it to transparent then the color will just be the default color.