Hey I have an svg of a color animation, it’s basically a gradient that loops around. And was wondering if it’s possible to change the font color of the active tab to that svg animation.

I’ve been trying to do it with:

.tabbrowser-tab[selected] .tab-content{ text-color: url(../icons/animation.svg) !important; }

but can’t get it to work.

Thanks for any help!

  • @MrOtherGuyM
    2•5 months ago

    I’m not sure about how the svg would work here (though it might work fine), but you can do that with just CSS as well:

    @keyframes tab-gradient-anim{
  from{ background-position-x: 0% }
  to{ background-position-x: 200% }
}
.tab-content[selected]{
  background-image: linear-gradient(
        90deg,
        rgb(255, 0, 0) 0%,
        rgb(255, 154, 0) 12%,
        rgb(208, 222, 33) 24%,
        rgb(79, 220, 74) 35%,
        rgb(63, 218, 216) 44%,
        rgb(47, 201, 226) 50%,
        rgb(28, 127, 238) 60%,
        rgb(95, 21, 242) 70%,
        rgb(186, 12, 248) 80%,
        rgb(251, 7, 217) 90%,
        rgb(255, 0, 0) 100%
    );
  background-repeat: repeat-x;
  background-size: 200% 100%;
  animation: tab-gradient-anim 2s infinite steps(20);
  background-clip: text;
  color: transparent;
}
.tab-content[selected]:-moz-window-inactive{
  animation-play-state: paused;
}

    You could use linear instead of steps(20) for interpolation method, but linear causes rather massive GPU use because it is updated at your framerate - steps(20) instead updates only 20 times during the 2 seconds interval - which, although not as smooth, is barely noticeable change perceptually but uses way less GPU.

    Here I’ve also added rule to stop the animation when window becomes inactive - otherwise the animation runs for all of them. Feel free to remove that last part, but if you had - say 5 windows, the animation would then use about 5x GPU.