How to Create Dual-Color Text in CSS Without Duplicating Content?

Dual-Color Text Using CSS

The question arises on how to achieve a text effect where one side has a specific color and background while the other side has a different color and background without duplicating content. The provided example showcases this effect by using divs with inline-block and setting the width, background color, overflow, and height for each div. Inside these divs, paragraphs are defined with a width of 200% and different text colors.

However, this approach requires duplicating the content. To avoid this, another technique can be employed. Background-clip:text CSS property comes to the rescue. This property allows you to define the region where the background should be rendered. In this case, it can be set to 'text', which will apply the background to the text itself.

With this technique, you can create a gradient background for the text, allowing different color combinations on either side. The following CSS and HTML code demonstrates this approach:

#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>

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