Apply CSS to only half of the character or text

In this article we will learn a way to apply CSS to only half of the character and of course in a very simple way, without using any external libraries.

Hey you programmer, how are you? Let’s learn more about CSS!

The idea to leave only half of a character with CSS is to use a gradient, which half will be of one color and the other half of another

Thus leaving each part of the letter or character with different colors

In addition, we will remove the transition from the gradient or gradient, so that the colors are changed suddenly, creating the effect that each half has its own color.

So let’s take a practical example:

<h1>H</h1>

And now see the required CSS:

h1 {
 display: inline-block;
 font-family: Helvetica;
 font-weight: bold;
 font-size: 200px;
 background: linear-gradient(to right, red 50%,blue 50%);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
}

This is the return in the browser:

As the text gets bigger, it will be necessary to adjust the background parameters

The background-clip and text-fill-color properties are of paramount importance for the feature to work

The background-clip understands that the background color is in the text and not in the background of the element

And text-fill is for applying color to the text

Conclusion

In this article we learned how to apply CSS to only half of the character

We use the background property with a gradient, which combined with the background-clip and text-fill properties will allow this feature

Remembering that as the texts get bigger, we will need to adjust some values of the background property to adapt where each part starts and ends

This way we adjust it to be exactly in the center of the text

Want to learn more about CSS? Click here!