Quick UI: Rotating Text Mask —

Using conic-gradient and clip-path to recreate an appealing UI element

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:

Copy code<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>

Copy code.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:

Copy code<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:

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

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.

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:

Final element

 

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!