I came across an appealing text effect on the Adobe XD home page, and thought I'd recreate it here, and give it a quick colourful retouch.

Welcome to Quick UI, a series of articles where we'll be building some quirky elements together. I won't go too in-depth, but I will make some pleasing interactive visualisations and point you in the right direction.

Spinning background

The first step towards building this element is creating the rotating background. For this we can create a conic-gradient() (one side red/pink, the other navy blue), and use a CSS rotation animation to spin it around. Then we can duplicate the element, make it slimmer, and reverse the animation direction of the new element:

HTML layout

<div class="container">
  <div style="width: 55%; overflow: hidden; ...">
    <div class="rotating-box"></div>
  </div>
  <div style="width: 45%; overflow: hidden; ...">
    <div class="rotating-box-reverse"></div>
  </div>
</div>

Animation and gradient CSS

.rotating-box {
  background-image: conic-gradient(
    rgb(219, 54, 78) 0%,
    rgb(220, 59, 143) 50%,
    rgb(51, 55, 85) 50%,
    rgb(51, 55, 85) 100%
  );
  animation: rotate 7500ms cubic-bezier(.11,.74,.81,.16) infinite;
  ...
}
	
.rotating-box-reverse {
  animation-direction: reverse;
}
	
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Clipping mask

Next up we need to clip the background to the text. Adobe did this by using mix-blend-mode: lighten combined with dark text on a light background. There's a downside to using the lighten blend mode; if the background around the text is darker than the gradient, the text will not clip correctly.

We're using a more versatile solution here, one that will work with any background—an SVG clipping mask.

SVG clipPath

Placing our text within this set of SVG tags will allow us to make use of CSS clip-path. We'll put this SVG element before the container for our text effect:

<svg height="2em" width="100%">
  <defs>
    <clipPath id="custom-mask">
      <text>
        <tspan x="0" dy="1em">Hey, I'm</tspan>
        <tspan x="0" dy="1em">CTNicholas</tspan>
      </text>
    </clipPath>
  </defs>
</svg>

We can now add the following CSS property to the parent element (the one containing both rotating backgrounds), and it should be working already. Note that we've passed the id from the SVG clipPath tag:

.container {
  clip-path: url(#custom-mask);
}

If you're implementing this...

Look out for this Chromium bug

In current Chromium browsers, text-based SVG clip-paths will sometimes not display correctly on first render. To fix this, set the clip-path inside setTimeout():

setTimeout(() => {
  const clippedElement = document.querySelector('#clipped-element')
  clippedElement.style['clip-path'] = '#svg-element'
}, 0)

Adobe XD element successfully recreated! If you're interested, you can see the original element two-thirds of the way down the Adobe XD homepage. However, I think we can go a step further and make it extra fabulous .

An extra touch

Animating between conic gradient colours isn't supported using only CSS yet, but we can fade between two differently-coloured elements to give a similar effect.

Opacity: 0.00

Multiple colours

If we take this to the next level, we can wait until the top element's opacity is 0, or the bottom layer is obscured, then swap its colour for another. Using this technique you can switch between multiple colours whilst only using two rotating backgrounds. Try sliding the range slider back and forth for a 4-colour animation:

Opacity: 0.00

Toggle red/green background

Toggle blue/peach background

Final element

quick

And there you go, that's how to create a text element with a rotating masked background. Let me know if you've enjoyed Quick UI and I'll make sure to write some similar articles soon!

Which CSS Blend Mode?

Quick UI — Rotating Text Mask