How to Create Dual-Color Text Without Duplicating Content?

Dual-Color Text Without Duplication

Duplicating content to achieve a dual-color text effect can be cumbersome. Here's a more elegant solution using purely HTML and CSS:

Using Background-Clip

Leveraging the background-clip: text property allows you to color the text with a gradient, providing immense flexibility in creating color combinations:

#main {
  background: linear-gradient(to right, red 50%, #fff 50%);
}

#main > p {
  background: linear-gradient(to left, blue 50%, #fff 50%);
  display: inline-block;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

<div>

This technique eliminates the need for duplicated content while enabling the creation of stunning and versatile dual-color text effects.

The above is the detailed content of How to Create Dual-Color Text Without Duplicating Content?. For more information, please follow other related articles on the PHP Chinese website!