How to actually animate a text gradient in CSS

Cover photo by Kristopher Roller via Unsplash.

Since you all liked my iridescent shambling monstrosity, I figured it was worth a second swing. Thanks to @erinjzimmer for letting me know that it's possible to animate the gradient background by animating background-position.

So, instead of writing a humorous article where I make the worst technically-functional CSS possible, let's try to make this thing not terrible. I swear, the only JavaScript I used this time was for the buttons.

I don't have a problem, I can stop whenever I want.

Since we figured out how to get the rainbow text last time, let's jump to the good parts.

Animating background position

To use transitions with this, it's very likely that I would have had to resort to similar tactics as in the previous post (yikes) to make sure that the gradient moved in one direction continuously. But instead of going through all that effort, I decided to use @keyframes, which turned out to be as easy as forgetting to add files before you commit.

@keyframes whoosh {
  0% { background-position-x: 0 }
  100% { background-position-x: 100% }
}

.animated-thing {
  animation-name: whoosh; // references @keyframes name
  animation-duration: 2000ms; // or whatever
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

There's an important caveat to be mentioned to make this look good, though.

A... catveat? Eh?

The cat image is 200px wide, and the window is either 400px wide or 500px wide. (Click to toggle.) When the container is 400px wide, the animation is smooth and you don't notice it suddenly resetting to the beginning when it loops. When it's 500px wide, the end of the animation is 100px offset and the jump is very noticeable.

Using gifs for illustration:

When the loop resets, it's in the same position as when it started, making the looping is much less noticeable. (There may still be a jump, but it should be very small.)

Despite the cuteness of this fluffy cloud-friend, the jump is very noticeable due to the camera turning downward sharply at the last moment. Would pat cat, would not animate smoothly.

Another issue is that setting the background to be exactly the same width as its container in this case causes it to not animate. I guess CSS thinks it has nowhere to go! So it needs to be some exact fraction or exact multiple, but not equal. And it needs to reset to the exact same position it started in.

Animating background position with gradients

To make CSS actually animate it, I set the background-size to 200% width (and 100% height). That was the easy part.

To get the gradient to animate smoothly was trickier.

  $first-color: #996699;
  $second-color:  #B39500;
  $third-color:  #009980;
  $fourth-color: #006699;
  $angle: 75deg;

  background-image: linear-gradient(
    $angle,
    // so you can see the repetition of colors easily
    $first-color,
    $second-color,
    $third-color,
    $fourth-color,
    // repeat a second time
    $first-color,
    $second-color,
    $third-color,
    $fourth-color,
    // back to the first color
    $first-color
  );
}

This is how the gradient is set up so that it doesn't appear to "jump" when the loop resets. It needs to repeat twice, but also repeat the first bit of the loop. In the final pen, this was turned into a mixin.

@mixin flag-gradient($direction: null, $color-stops...) {
  $grads: $color-stops;
  @each $stop in $color-stops {
    $grads: append($grads, $stop);
  }
  $grads: append($grads, nth(nth($grads, 1), 1));

  // [ clipped ]

  background-image: linear-gradient($direction, $grads);
}

This does all that repetition work for you. It copies the arg list sent in, then loops over it to append each of the new color stops (hmu if you know a better way to do that part), Then picks out the color part of the first color stop and tacks that onto the end. That way you only need to specify your actual flag colors.

Also take note of the angle you put the gradient towards - the steeper it is, the more noticeable the jump will be. Somewhere between 75 and 90 is nearly invisible but still looks tilty enough to be aesthetically pleasing. The smaller the width the sharper this angle needs to be, as well. 90 is safe!

If you're viewing the inline pen on dev.to, you'll see the 90 degree variant, because of this bit:

@mixin flag-gradient($direction: null, $color-stops...) {
  // [ clipped ]

  @if $direction == null {
    $direction: 75deg;
    @media only screen and  (max-width : 800px) {
      $direction: 80deg;
    }
    @media only screen and  (max-width : 500px) {
      $direction: 90deg;
    }
  }

  // [ clipped ]
}

Since the animation quality varies so sharply based on the angle & width, I auto adjusted it if you don't send an override.

Adding more flags 🏳️‍🌈 (refactoring)

After I got the initial rainbow animation going, it seemed... too easy. I needed to work harder in the eternal struggle against CSS. I wondered, was this able to be generalized? Could I show even more pride?

In the bi pride flag, I discovered another interesting caveat. In order to make the jumps less noticeable, the gradient should be as smooth as possible. Using percentage based color stops generally turns out poorly; just plain duplicating the colors turned out to have better results.

Hm, I'd really like to see a text shadow on there to make the white bits not blend into the background so much. White shows up on a few different flags, so it's definitely a general issue.

That went well.

This is actually entirely logical, if you think about it. The entire reason the gradient text trick works in the first place is by making the text itself transparent, and clipping the background; not by actually applying the background to the text.

I did look into fixing this. StackOverflow suggests:

Basically, the idea is to have 2 div overplayed on each other. The lower one provides the background and the shadow. And the the div above just uses a mask to cut out the exact same text from the background image, so that it covers the text of lower element, but not the shadow:

2 div overplayed on each other

2 div overplayed on each other

2 div overplayed on each other

Not going down that road again! You can't make me!

Close enough.

After a bit of playing around with various flag designs and colors, I settled on needing four different "themes", based around light/dark and warm/cool. That's what all this is for:

$background-map: (
    light-cool: #ecf0f1,
    light-warm: #f2eded,
    dark-cool: #10181e,
    dark-warm: #0e070a,
);

@function get-opposite-tone($tone) {
  @if $tone == 'light' {
    @return 'dark';
  }
  @return 'light';
}

@mixin set-background($tone: 'light', $temp: 'cool') {
  $primary: null;
  $secondary: null;

  background-color: map-get($background-map, #{$tone}-#{$temp});
  & > #picker > button {
    background-color: map-get($background-map,
      #{get-opposite-tone($tone)}-#{$temp}
    );
    &.highlight {
      @if $tone == 'light' {
        background-color: lighten(map-get($background-map,
        #{get-opposite-tone($tone)}-#{$temp}
      ), 12);
      } @else {
        background-color: darken(map-get($background-map,
          #{get-opposite-tone($tone)}-#{$temp}
        ), 24);
      }
    }
    color: map-get($background-map, #{$tone}-#{$temp});
  }

  // [ clipped ]
}

At this point, all I needed was 8 lines of JavaScript (... plus jQuery) to hook the buttons up.

Wrap-up fun facts

• The buttons on the side use CSS Grid for layout and it was extremely easy and convenient
• Did you know there's not one standard "lesbian" pride flag? I picked the lipstick lesbian flag because that was easy to find color definitions for and seemed to be the most popular
• SCSS arglists are a thing
• You can't put an @media query statement inside an @function (lmao I tried just to see if it would work, but the compiler throws an exception)