How to apply CSS to half of a character?

Spread the love

Sometimes, we want to apply CSS to half of a character.

In this article, we’ll look at how to apply CSS to half of a character.

How to apply CSS to half of a character?

To apply CSS to half of a character, we can set the background and background-clip CSS properties.

For instance, we write

h1 {
  display: inline-block;
  margin: 0;
  line-height: 1em;
  font-family: helvetica, arial, sans-serif;
  font-weight: bold;
  font-size: 300px;
  background: linear-gradient(to right, #7db9e8 50%, #1e5799 50%);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

to set the background CSS property to have a linear gradient.

And we set the background-clip CSS property to text to make the background color stay confined to the text.

Leave a Reply

Your email address will not be published.