CSS Gradient and Images for Text

Applying CSS gradient colors or images to text in web design is very popular today. Since CSS does not have an option to set a gradient color directly on texts, we will use the background-clip option to work around it. Look at the following example with gradient colors and images applied to texts.

First, we can create any kind of element, then apply the font sizes, weights, and any other rules you need. The main concept for the gradient text color is to set the gradient color to the background of the element. After that, we can use the background-clip rule to keep only the background covered area of the text. Finally, we can set the text color to transparent, making the original text invisible, so we can see the gradient area we kept. This appears as text with a gradient effect.

<!-- element with text -->
<div class="gradient-text">
  This is a gradient text
</div>

<style>
  .gradient-text {
    /* common style */
    font-size: 40px;
    font-weight: 600;
    line-height: 60px;
    font-family: "Roboto";
    /* linear gradient background */
    background-image: linear-gradient(to right, #9966ff, #33cccc);
    /* clip the background to the text area */
    background-clip: text;
    -webkit-background-clip: text;
    /* transparent color to see through */
    color: transparent;
  }
</style>

Applying an image is almost the same as above; the main difference is that instead of using a CSS gradient rule, we will use an image with the necessary sizing and positioning.

.image-pattern-text {
  /* clip the background to the text area */
  background-clip: text;
  -webkit-background-clip: text;
  /* transparent color to see through */
  color: transparent;
  /* background image url */
  background-image: url(/path/to/image.jpg);
  /* background sizing and positioning */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}