Hacking background-clip with gradient colour stops
Tags: css, webdev
Published: 2022-08-18 09:16:54

---
title: Hacking background-clip with gradient colour stops
date: 2022-08-18 03:15:17 UTC
published: true
tags: css, webdev
canonical_url: https://chenhuijing.com/blog/hacking-background-clip-with-gradient-colour-stops/
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ugmthfv9a51ry7a0h1ix.png
---

Before we get into all the hacking and unorthodox ways of doing things, let’s talk about `background-clip: text` properly. If you want an image or a gradient applied to a run of text, like so:

![Garnbret takes first ever boulder & lead title, goes 3 for 3 at Munich 2022](https://chenhuijing.com/assets/images/posts/background-clip/garnbret@2x.png)

You can achieve such an effect without having to use an image. There is CSS you can apply to your text to make it that fancy. You would need to wrap the bit to be bling-ed up in a span so you can CSS it properly:

```html
<h1>Garnbret takes first ever boulder & lead title, <span class="highlight">goes 3 for 3 at Munich 2022</span></h1>
```

`background-clip: text` will make a background image or gradient be clipped to the text in the foreground. The text to be fancy-fied needs to be transparent so the background can show through. And the CSS will look like this:

```css
.highlight {
  background-image: linear-gradient(to right, midnightblue, darkturquoise);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
```

If you check MDN, there will be a warning on the `-webkit-text-fill-color` entry saying this is a non-standard implementation. But I still prefer to use this rather than setting `color: transparent` because when you encounter a browser who does not support background-clip, you won’t end up with transparent, invisible text.

According to [Introducing Text-Stroke](https://webkit.org/blog/85/introducing-text-stroke/) from the Webkit blog:

> text-fill-color – This property allows you to specify a fill color for text. If it is not set, then the color property will be used to do the fill.

After analysing the browser support matrix for `background-image` and `background-clip: text`, I concluded that any fallbacks I need to write will only need to apply to IE11. Do you even need to care about IE11 anymore, I hear some people wondering?

This is a choice you have to make. I’m merely sharing with you an approach to take if you want to.

There are actually 2 browsers that do not support `background-clip: text`, IE11 and Opera Mini if it is using the Presto rendering engine (if you have no idea about Opera Mini, might I suggest reading [We need to talk about Opera Mini](https://chenhuijing.com/blog/we-need-to-talk-about-opera-mini/)).

But because Opera Mini does not support `background-image: linear-gradient()` nor `-webkit-text-fill-color`, it conveniently just renders the text in black.

IE11, on the other hand, does support `background-image: linear-gradient()`, which means the text ends up looking like this:

![IE11 does not clip the background](https://chenhuijing.com/assets/images/posts/background-clip/ie11.jpg)

Quite a colour contrast failure, to be honest. But a relatively low effort fix is available to us. It’s a lovely bit of CSS known as feature queries. I recommend reading Jen Simmons’ [Using Feature Queries in CSS](https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/) or maybe [Cascading Web Design with Feature Queries](https://24ways.org/2017/cascading-web-design/).

The code will look like this:

```css
@supports (background-clip: text) {
  .highlight {
    background-image: linear-gradient(to right, midnightblue, darkturquoise);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
```

IE11 actually does not support `@supports`, which works out fine because it just means this entire code block gets ignored and the text is rendered in black, without any bells and whistles. Just like how Opera Mini handled it.

*Update on the fallback bit!*  
Someone pinged me to say that the text was not rendering right on iOS Safari 15.2.1 and after digging into the problem, I am fairly confident that it was due to [this Webkit bug](https://bugs.webkit.org/show_bug.cgi?id=169125) that was fixed and shipped in 15.5.

Turns out, the people who were trying to use `background-clip: text` supported iOS by adding `-webkit-box-decoration-break: clone;` as a workaround. Based on my understanding of the `box-decoration-break` property, it tells the browser [how to render elements that have been broken up](https://developer.mozilla.org/en-US/docs/Web/CSS/box-decoration-break) into fragments.

The unfortunate side-effect of this fix is that my gradient hack doesn't work exactly as intended because the gradient is then applied onto each line independently with this property turned to `clone`.

<img src="https://chenhuijing.com/assets/images/posts/background-clip/fallback.png" alt="Gradient hack with box-decoration-break set to clone" />

I could hack feature queries to target those Webkit browsers before 15.5 by using the `contain` property which was released in 15.4. As you can see, we are really mucking around in hack-land right now. But the code would now look like this:

```css
@supports (-webkit-background-clip: text) {
  .highlight {
    display: inline;
    background-image: linear-gradient(to right, black 0%, black 63.5%, midnightblue 63.5%, darkturquoise);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

@supports not (contain: size) {
  .highlight {
    -webkit-box-decoration-break: clone; /* For Webkit versions earlier than 15.4 */
  }
}
```

This might be an overkill solution but I just wanted to exhaust all possibilities because I like doing such things. Unfortunately, it seems like the 15.4 browsers will fall through the crack and still bug out because it doesn't fall into my fallback coverage.

I did some investigation around iOS version usage numbers and found that the data showed adoption of newer versions is fairly high.

<img src="https://chenhuijing.com/assets/images/posts/background-clip/ios.png" alt="iOS version usage trend between July 2021 and July 2022" />

So over time, the number of people impacted by the bug will continue to drop and I can actually get away with this?

## The actual hackiness

Now that we’ve covered the scenario where you have all the control over your markup and styles, let’s add some constraints. Because sometimes, you’re using some existing framework or component library that does not allow you modify the markup as you please.

For my case, it wasn’t an impossibility to modify the markup, but it required making changes to the component itself which was used in many different places and I didn’t really want to go down a testing rabbit hole just for this fancy, one-off design pattern. At least, not this time.

So the problem I was facing now is that I could not wrap my target line of text in a span with my special fancy text CSS class. The markup was stuck looking like this:

```html
<h1>Garnbret takes first ever boulder & lead title, goes 3 for 3 at Munich 2022</h1>
```

After seriously trying to rewrite that specific part of the component to allow custom markup, and realising it would end up being much bigger than I expected. Plus, I am really not that good at Ruby. You know what I’m actually good at? CSS. 😈

I’ll state up front that I personally think this is REALLY a hack. And under normal circumstances, I would not do this at all, but life is about constraints. After weighing the pros and cons of this approach, it was deemed reasonable for my rather specific scenario.

The hack was to apply the gradient to the entire line of text but make the front part a solid colour with a hard stop where the text was supposed to start looking fancy.

```css
.highlight {
  display: inline; /* this trick only works for inline elements */
  background-image: linear-gradient(to right, black 0%, black 62%, midnightblue 62%, darkturquoise);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

```

The entire line had to be an inline element though, otherwise the gradient would apply across multiple lines if the text gets broken up.

![Gradient is not applied on the intended run of text](https://chenhuijing.com/assets/images/posts/background-clip/block@2x.png)

I’m pretty glad I did a deep dive into the display property all those years back. But the gist of it is that inline-level elements run like a _stacked daisy chain_ rather than a rectangular block, so the gradient is applied to the entire length of the text from the first character to the last, rather than the length of the box.

![Gradient is not applied on the intended run of text](https://chenhuijing.com/assets/images/posts/background-clip/inline@2x.png)

It works pretty well, to be honest, BUT there are a tonne of caveats that come with it. Because this is a **very fragile implementation**. If the ratio of black text to gradient text changes, the code will need to be modified. Even if the font-family changes, which will cause the length of the text to change, you might need to modify the gradient percentage values.

For my case, the line in question was English-only. The copy was final. And the font was explicitly declared (as opposed to something up to the browser’s interpretation like `font-family: serif`). Also, the page would only be live for a set period of time (it was not a “permanent” page so to speak). So the caveats were, acceptable.

If we had needed to translate the line, I might have been able to use a language-targeted selector to customise the gradient for each language. But it would have made a hacky method even hackier?

```css
:lang(zh) {
  .highlight {
    background-image: linear-gradient(to right, black 0%, black 62%, midnightblue 62%, darkturquoise);
  }
}
```

## Wrapping up

I’ll admit, even though the code was all of 4 lines, I literally sat still at my desk without moving for quite a while just thinking about what I could do if I couldn’t touch the markup. The gradient stop approach came to me when I was getting more coffee.

I guess the moral here is to not sit at your desk when you need a new idea? Anyway, after reading some of my previous writing, I think I’m a worse writer now, so no satisfying conclusion for this post. ¯\\\_(ツ)\_/¯