Experimenting with Text and CSS background-clip

The CSS background-clip property controls how much a background extends under a box. The Editor’s Draft extends it by allowing the background to be clipped by text. Support for text clipping is generally good. Firefox supports the proposed syntax, and WebKit / Chromium browsers support a prefixed version.

Because you can style text directly with backgrounds, this makes it less necessary to use SVGs for every letter or engage in some duplicated text trickery in order to design headlines that are more than solid colors. Or worse, images.

You can also animate the backgrounds you apply, as I do in this terrible Knight Rider example:

See the Pen KITT by Adrian Roselli (@aardrian) on CodePen.

Pair up on animations or use subtle effects that rely on interaction to make nifty effects. This block of text gleams when you hover, focus, or tap it:

See the Pen Metal Brunch by Adrian Roselli (@aardrian) on CodePen.

Potentially far more annoying, you can use these techniques to create the effect of text being typed:

See the Pen CSS Typed Text by Adrian Roselli (@aardrian) on CodePen.

This approach has a couple key advantages over at least one other: it does not rely on the latest Safari Technology Preview‘s support for animating content, and it does not rely on alternative text for CSS generated content (which is unsupported in Firefox and relies on proprietary code in Safari).

The biggest drawback is that my example does not work on wrapping text. I opted against it since I had already sunk enough time into just making this experiment.

My example works in VoiceOver (macOS, iPadOS, iOS), TalkBack, JAWS, NVDA, and Narrator, without waiting for all the text to be displayed. It also honors reduced motion settings (though it only disables the blinking cursor and background CRT jiggliness). Support for WCAG 2.1 Success Criterion 1.4.12 Text Spacing is baked in as well (try it with the bookmarklet).

Unlike others, I am not making unfounded claims this example is accessible. I am saying it works across browsers, works in screen readers, and passes WCAG 2.1. If you don’t need text to wrap (or adjust it to support wrapping text), then this might by handy for you as a base for your own experiments.

Essentially each letter is shown by extending a background gradient one hard step at a time. The cursor (which does not blink in Safari because Safari does not animate the content property) uses the same approach. For funsies, you can uncomment the two CSS custom properties in the :root selector to see the text in amber.

You have to make as many keyframes as there are letters, so you may want to write a sassy mix-up, or whatever the kids do to loop through the CSS logic and generate those keyframes for you. I wrote this to show a good user experience, not necessarily a good dev experience.

However you use background-clip, at least make sure it is as accessible as possible. If background-clip can get you the same outcome as other proprietary or unsupported properties, then probably replace them.