Gradient Texts
Tags: css, showdev, codenewbie, tutorial
Published: 2021-01-22 00:00:00

---
date: '2021-01-22'
published: true
title: Gradient Texts
pitch: An elegant technique to make your text and content to standout with some simple CSS
canonical_url: https://atila.io/gradient-texts
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/z4oma7g9jedwmwpv2di0.jpg
tags: css, showdev, codenewbie, tutorial
---

Recently, I created a landing page where I used a few interesting gradient effects. You can check them at [All About NextJS](https://atila.io/all-about-next). 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](https://caniuse.com/?search=background-clip) 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](https://mdn.io/background-clip) 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:

![hole puncher for kids](https://canary.contestimg.wish.com/api/webimage/5b73e63b0b12531450294558-large.jpg?cache_buster=9da573bdb53c63cb0a82a30e254ee0e9)

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:

{% codepen https://codepen.io/atilafassina/pen/jOMeyMX default-tab=result %}

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!).

```css
.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:

{% codepen https://codepen.io/atilafassina/pen/ExgdZwP default-tab=result %}

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

{% codepen https://codepen.io/atilafassina/pen/YzGJNar default-tab=result %}

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.

```css
.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  {% link https://dev.to/atila/5-clever-tips-on-css-1i0h %} 

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](https://unsplash.com/s/photos/gradient)