Gradient Texts

Recently, I created a landing page where I used a few interesting gradient effects. You can check them at All About NextJS. Though not super complicated or complex, these techniques aren’t widely used. And that’s why they revolve around a CSS property that though it has been around for a while, it has never had reliable support by the rendering engines. I believe this is the reason why it’s partially forgotten.

Background-Clip

When checking on CanIUse the results can be somewhat misleading, each value has a different level of standardized support. And the value we’re about to use does not even figure in that shortlist.

According to Mozilla Development Network the background-clip property:

(...)sets whether an element's background extends underneath its border box, padding box, or content box.

Let’s try to break that technical jibber jabber into plain English. Think of it as a virtual kid‘s hole puncher. And I only say kids because adults are boring and only use circles, but when it’s for kids, they come in all shapes:

I love a good analogy, so let’s ride this one for a little longer. The paper is our browser, the hole-puncher is the rendering engine, and the CSS will define the shape of this hole. In that specific scenario, we want the whole to have the exact same shape of our text. So, guess what? background-clip: text;.

Now it’s just a matter of styling the background as you normally would, and make the actual text transparent with color: transparent. It will remain accessible to screen-readers and crawlers, but our background will handle the graphics. Check the codepen below:

It’s worth noting support is not great on every browser. Webkit and Blink accept only the flagged version: -webkit-background-clip.

Adding some animation

It is not possible to animate background-image, but there is a workaround that will achieve a nice result. We can animate background-position, and since our background is only colours, we can expand the size of our background.

So by stretching our background at 4x the size of our actual container, we can animate its positioning. Like the view passing by your car window as you travel through a road (so poetic!).

.animate-text {
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background-size: 400% 400%;
  background-image: linear-gradient(
    45deg,
    #95f7d0,
    #63b9be,
    #887dc5,
    #d478ff,
    #ff94e7,
    #fec6c0,
    #fdff94,
    #b6f9bd
  );
}

Check it at this pen:

Gradient borders

Now, the most interesting are the 2 above, but this one is so fun that I felt like adding too. When not dealing with text, we can also play around by adding some animated gradient borders. Fancy!

Check it out!

It‘s a similar technique as the ones above, but instead of relying on background-clip it creates an outer-wrapper with the background gradient, and position its only child with an opaque background.

.box {
  /*
  we set border-radius as a custom-property
  this way elements always match
  */
  --border-radius: 5px;
  width: 300px;
  height: 150px;
  display: grid;
  place-items: center;
  /*
    same gradient as above
    hiding in a custom-prop to enhance readability
  */
  background-image: var(--gradient);
  border-radius: var(--border-radius);
  background-size: 400% 400%;
  animation: animateGradient 5s ease infinite;
}

.inner-box {
  width: 95%;
  height: 90%;
  background-color: black;
  border-radius: var(--border-radius);
}

More CSS tips?

Check out my other post

5 Clever tips on CSS

Atila Fassina ・ Aug 7 '20

#css #tutorial #codenewbie #codepen

What about you? Is there any obscure CSS feature that you have used lately? Or can you think about another nice use-case for background-clip ? I’d love to hear from you on this. Reach out on twitter and let me know!

Cover Photo by Elliott Engelmann