20 CSS Gradient Text Designs 03 / 20

CSS Conic Gradient Text Hue Spin

Full-spectrum hue rotation applied to conic-gradient-filled text, creating a continuously spinning rainbow prism effect driven by a CSS filter animation.

Pure CSS MIT licensed
Live Demo Open in tab
Open in playground

The code

<div class="gt-03">
  <span class="gt-03__label">Conic gradient text</span>
  <h1 class="gt-03__conic">PRISM</h1>
  <p class="gt-03__sub">Full-spectrum hue rotation</p>
  <div class="gt-03__trio">
    <div class="gt-03__item">
      <span class="gt-03__big">RED</span>
      <span class="gt-03__caption">0°</span>
    </div>
    <div class="gt-03__item">
      <span class="gt-03__big">GREEN</span>
      <span class="gt-03__caption">120°</span>
    </div>
    <div class="gt-03__item">
      <span class="gt-03__big">BLUE</span>
      <span class="gt-03__caption">240°</span>
    </div>
  </div>
</div>
.gt-03, .gt-03 *, .gt-03 *::before, .gt-03 *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
.gt-03 {
  --bg: #111118;
  font-family: 'Plus Jakarta Sans', sans-serif;
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  padding: 3rem 2rem;
}
.gt-03__label {
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #555;
}
.gt-03__conic {
  font-size: clamp(3rem, 12vw, 8rem);
  font-weight: 900;
  line-height: 1;
  background: conic-gradient(
    from 0deg,
    #ff0080, #ff8c00, #ffe100, #40ff00,
    #00cfff, #8000ff, #ff0080
  );
  background-size: 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gt-03-spin 3s linear infinite;
}
.gt-03__sub {
  font-size: clamp(1rem, 3vw, 1.6rem);
  font-weight: 800;
  background: conic-gradient(from 180deg, #ff8c00, #ffe100, #40ff00, #00cfff, #8000ff, #ff8c00);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gt-03-spin 5s linear infinite reverse;
  letter-spacing: .04em;
}
.gt-03__trio {
  display: flex;
  gap: 2.5rem;
  flex-wrap: wrap;
  justify-content: center;
}
.gt-03__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
}
.gt-03__big {
  font-size: clamp(2rem, 6vw, 4rem);
  font-weight: 900;
  background: conic-gradient(from 90deg, #ff0080, #ff8c00, #ffe100, #40ff00, #00cfff, #ff0080);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gt-03-spin 4s linear infinite;
}
.gt-03__item:nth-child(2) .gt-03__big { animation-delay: -1.3s; }
.gt-03__item:nth-child(3) .gt-03__big { animation-delay: -2.6s; }
.gt-03__caption {
  font-size: .65rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #555;
}
@keyframes gt-03-spin {
  0%   { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .gt-03__conic, .gt-03__sub, .gt-03__big { animation: none; }
}

How this works

A conic-gradient(from 0deg, #ff0080, #ff8c00, ... #ff0080) paints all hues around the colour wheel as the text fill. Instead of animating the gradient stops — which would cause repaints — the demo animates filter: hue-rotate(0deg → 360deg) on the text element. Hue rotation is a compositor operation that shifts all colours in the gradient simultaneously without recalculating paint, giving a smooth full-spectrum spin.

Three sibling word elements each run the same keyframe with evenly-spaced animation-delay values so each word sits at a different point in the colour wheel at any given moment. The reverse direction on the subtitle produces a counter-spinning effect that adds visual tension.

Customize

  • Change spin speed by adjusting the 3s duration on gt-03-spin — try 8s for a slow meditative rotation.
  • Combine hue-rotate with a saturate(1.5) filter to boost vibrancy on lower-contrast displays: filter: hue-rotate(0deg) saturate(1.5).
  • Replace the conic gradient with a linear one for a diagonal colour shift instead of a wheel sweep — both respond identically to the hue-rotate filter.

Watch out for

  • conic-gradient is not supported in Firefox below version 83 or in IE/Edge Legacy — provide a linear-gradient fallback before the conic rule.
  • filter: hue-rotate affects the entire element including borders and box-shadows; wrap the text in a container if you want surrounding UI elements to stay static.
  • Animating filter forces layer promotion — avoid stacking more than a handful of hue-rotating elements on the same page to stay within GPU memory budgets.

Browser support

ChromeSafariFirefoxEdge
69+ 12.1+ 83+ 69+

Conic-gradient landed in Firefox 83; use a linear-gradient fallback for older Firefox environments.

More from 20 CSS Gradient Text Designs

CSS Crystalline Prism Gradient TextCSS Scroll Gradient Text Reveal on ScrollCSS Click Ripple Gradient Text InteractionCSS Cursor-Tracked Radial Gradient TextCSS Typewriter Loop Gradient Text AnimationCSS Animated Gradient Text FlowCSS Aurora Borealis Gradient Text SweepCSS Rainbow Wave Per-Letter Gradient TextCSS Lava Lamp Radial Gradient TextCSS Neon Pulse Gradient Text GlowCSS Gradient Text Outline Stroke EffectCSS Metallic Chrome Gold Copper Gradient Text
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →