30 CSS Hover Effects04 / 30

Pure CSSMIT licensed

CSS Gradient Text Reveal Hover Effect

Six gradient text hover techniques — background-clip reveal, linear wipe, conic sweep, radial burst, rainbow shift, and masked shimmer — each using CSS background-clip: text to paint a gradient directly onto letterforms on hover.

Published

Live Demo
Try it

This is a full-page demo — interact inside the frame above, or open it in the playground for the full-screen experience.

The code

<div class="hv-04">
  <div class="hv-04__grid">
    <div class="hv-04__cell">
      <span class="hv-04__text hv-04__text--wipe">AURORA</span>
      <span class="hv-04__label">gradient position wipe</span>
    </div>
    <div class="hv-04__cell">
      <span class="hv-04__text hv-04__text--burst">RADIAL</span>
      <span class="hv-04__label">radial-gradient burst</span>
    </div>
    <div class="hv-04__cell">
      <span class="hv-04__text hv-04__text--rainbow">SPECTRUM</span>
      <span class="hv-04__label">rainbow hue-shift</span>
    </div>
    <div class="hv-04__cell">
      <span class="hv-04__text hv-04__text--shimmer">SHIMMER</span>
      <span class="hv-04__label">shimmer keyframe</span>
    </div>
    <div class="hv-04__cell">
      <span class="hv-04__text hv-04__text--duotone">DUOTONE</span>
      <span class="hv-04__label">dual-tone color swap</span>
    </div>
    <div class="hv-04__cell">
      <span class="hv-04__text hv-04__text--diagonal">PRISM</span>
      <span class="hv-04__label">diagonal sweep</span>
    </div>
  </div>
</div>
.hv-04,
.hv-04 *,
.hv-04 *::before,
.hv-04 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.hv-04 ::selection {
  background: #6d28d9;
  color: #fff;
}

.hv-04 {
  --bg: #06040f;
  --text: #d4d4f7;
  --dim: #555;
  font-family: 'Segoe UI',system-ui,sans-serif;
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
}

.hv-04__grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 32px;
  max-width: 900px;
  width: 100%;
}

.hv-04__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 48px 24px;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
}

.hv-04__label {
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--dim);
  text-align: center;
}
/* shared text base */

.hv-04__text {
  font-size: clamp(1.6rem,4vw,2.4rem);
  font-weight: 900;
  letter-spacing: .06em;
  cursor: default;
  display: inline-block;
  -webkit-background-clip: text;
  background-clip: text;
}
/* 1 — position wipe */

.hv-04__text--wipe {
  color: var(--text);
  background-image: linear-gradient(90deg,#7c3aed,#06b6d4,#10b981);
  background-size: 200% auto;
  background-position: right center;
  transition: background-position .5s cubic-bezier(.4,0,.2,1),color .5s;
}

.hv-04__text--wipe:hover {
  color: transparent;
  background-position: left center;
}
/* 2 — radial burst */

.hv-04__text--burst {
  color: var(--text);
  background-image: radial-gradient(circle at 50% 50%,#f59e0b,#ef4444,#7c3aed);
  background-size: 0% 0%;
  background-position: center;
  transition: background-size .5s cubic-bezier(.4,0,.2,1),color .5s;
}

.hv-04__text--burst:hover {
  color: transparent;
  background-size: 200% 200%;
}
/* 3 — rainbow shift */

.hv-04__text--rainbow {
  color: var(--text);
  background-image: linear-gradient(90deg,#f43f5e,#f59e0b,#10b981,#06b6d4,#6d28d9,#f43f5e);
  background-size: 400% auto;
  background-position: 0% center;
  transition: background-position .6s,color .4s;
}

.hv-04__text--rainbow:hover {
  color: transparent;
  background-position: 100% center;
}
/* 4 — shimmer keyframe */

.hv-04__text--shimmer {
  color: var(--text);
  background-image: linear-gradient(105deg,#c4b5fd 0%,#fff 40%,#7c3aed 55%,#c4b5fd 100%);
  background-size: 200% auto;
  transition: color .3s;
}

.hv-04__text--shimmer:hover {
  color: transparent;
  animation: hv-04-shimmer .8s linear infinite;
}

@keyframes hv-04-shimmer {
  0% {
    background-position: -100% center;
  }

  100% {
    background-position: 200% center;
  }
}
/* 5 — duotone swap */

.hv-04__text--duotone {
  color: var(--text);
  background-image: linear-gradient(135deg,#f43f5e,#f97316);
  background-size: 100% 100%;
  transition: color .4s,filter .4s;
}

.hv-04__text--duotone:hover {
  color: transparent;
  filter: hue-rotate(120deg) saturate(1.4);
}
/* 6 — diagonal sweep */

.hv-04__text--diagonal {
  color: var(--text);
  background-image: linear-gradient(135deg,#06b6d4 0%,#a21caf 50%,#06b6d4 100%);
  background-size: 200% 200%;
  background-position: bottom right;
  transition: background-position .6s cubic-bezier(.4,0,.2,1),color .4s;
}

.hv-04__text--diagonal:hover {
  color: transparent;
  background-position: top left;
}

@media (max-width: 640px) {
  .hv-04__grid {
    grid-template-columns: repeat(2,1fr);
  }
}

@media (max-width: 400px) {
  .hv-04__grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hv-04__text {
    transition: none!important;
    animation: none!important;
  }
}
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Hover Effect from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: CSS Gradient Text Reveal Hover Effect
Source: https://codefronts.com/motion/css-hover-effects/css-gradient-text-reveal-hover-effect/

Six gradient text hover techniques — background-clip reveal, linear wipe, conic sweep, radial burst, rainbow shift, and masked shimmer — each using CSS background-clip: text to paint a gradient directly onto letterforms on hover.
## HTML
```html
<div class="hv-04">
  <div class="hv-04__grid">
    <div class="hv-04__cell">
      <span class="hv-04__text hv-04__text--wipe">AURORA</span>
      <span class="hv-04__label">gradient position wipe</span>
    </div>
    <div class="hv-04__cell">
      <span class="hv-04__text hv-04__text--burst">RADIAL</span>
      <span class="hv-04__label">radial-gradient burst</span>
    </div>
    <div class="hv-04__cell">
      <span class="hv-04__text hv-04__text--rainbow">SPECTRUM</span>
      <span class="hv-04__label">rainbow hue-shift</span>
    </div>
    <div class="hv-04__cell">
      <span class="hv-04__text hv-04__text--shimmer">SHIMMER</span>
      <span class="hv-04__label">shimmer keyframe</span>
    </div>
    <div class="hv-04__cell">
      <span class="hv-04__text hv-04__text--duotone">DUOTONE</span>
      <span class="hv-04__label">dual-tone color swap</span>
    </div>
    <div class="hv-04__cell">
      <span class="hv-04__text hv-04__text--diagonal">PRISM</span>
      <span class="hv-04__label">diagonal sweep</span>
    </div>
  </div>
</div>
```
## CSS
```css
.hv-04,
.hv-04 *,
.hv-04 *::before,
.hv-04 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.hv-04 ::selection {
  background: #6d28d9;
  color: #fff;
}

.hv-04 {
  --bg: #06040f;
  --text: #d4d4f7;
  --dim: #555;
  font-family: 'Segoe UI',system-ui,sans-serif;
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
}

.hv-04__grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 32px;
  max-width: 900px;
  width: 100%;
}

.hv-04__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 48px 24px;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
}

.hv-04__label {
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--dim);
  text-align: center;
}
/* shared text base */

.hv-04__text {
  font-size: clamp(1.6rem,4vw,2.4rem);
  font-weight: 900;
  letter-spacing: .06em;
  cursor: default;
  display: inline-block;
  -webkit-background-clip: text;
  background-clip: text;
}
/* 1 — position wipe */

.hv-04__text--wipe {
  color: var(--text);
  background-image: linear-gradient(90deg,#7c3aed,#06b6d4,#10b981);
  background-size: 200% auto;
  background-position: right center;
  transition: background-position .5s cubic-bezier(.4,0,.2,1),color .5s;
}

.hv-04__text--wipe:hover {
  color: transparent;
  background-position: left center;
}
/* 2 — radial burst */

.hv-04__text--burst {
  color: var(--text);
  background-image: radial-gradient(circle at 50% 50%,#f59e0b,#ef4444,#7c3aed);
  background-size: 0% 0%;
  background-position: center;
  transition: background-size .5s cubic-bezier(.4,0,.2,1),color .5s;
}

.hv-04__text--burst:hover {
  color: transparent;
  background-size: 200% 200%;
}
/* 3 — rainbow shift */

.hv-04__text--rainbow {
  color: var(--text);
  background-image: linear-gradient(90deg,#f43f5e,#f59e0b,#10b981,#06b6d4,#6d28d9,#f43f5e);
  background-size: 400% auto;
  background-position: 0% center;
  transition: background-position .6s,color .4s;
}

.hv-04__text--rainbow:hover {
  color: transparent;
  background-position: 100% center;
}
/* 4 — shimmer keyframe */

.hv-04__text--shimmer {
  color: var(--text);
  background-image: linear-gradient(105deg,#c4b5fd 0%,#fff 40%,#7c3aed 55%,#c4b5fd 100%);
  background-size: 200% auto;
  transition: color .3s;
}

.hv-04__text--shimmer:hover {
  color: transparent;
  animation: hv-04-shimmer .8s linear infinite;
}

@keyframes hv-04-shimmer {
  0% {
    background-position: -100% center;
  }

  100% {
    background-position: 200% center;
  }
}
/* 5 — duotone swap */

.hv-04__text--duotone {
  color: var(--text);
  background-image: linear-gradient(135deg,#f43f5e,#f97316);
  background-size: 100% 100%;
  transition: color .4s,filter .4s;
}

.hv-04__text--duotone:hover {
  color: transparent;
  filter: hue-rotate(120deg) saturate(1.4);
}
/* 6 — diagonal sweep */

.hv-04__text--diagonal {
  color: var(--text);
  background-image: linear-gradient(135deg,#06b6d4 0%,#a21caf 50%,#06b6d4 100%);
  background-size: 200% 200%;
  background-position: bottom right;
  transition: background-position .6s cubic-bezier(.4,0,.2,1),color .4s;
}

.hv-04__text--diagonal:hover {
  color: transparent;
  background-position: top left;
}

@media (max-width: 640px) {
  .hv-04__grid {
    grid-template-columns: repeat(2,1fr);
  }
}

@media (max-width: 400px) {
  .hv-04__grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hv-04__text {
    transition: none!important;
    animation: none!important;
  }
}
```

How this works

The core technique clips a background-image: linear-gradient() to the text alpha channel using -webkit-background-clip: text and background-clip: text, then sets color: transparent so the gradient shows through. Transitioning between a solid-color gradient and a multi-stop gradient on hover is not directly animatable, so the workaround is to transition background-position on an oversized background-size: 200% gradient — sliding it into view on hover.

The shimmer variant combines background-size: 200% auto with a @keyframes animation that shifts background-position from -100% to 200% only while :hover is active. The conic sweep uses conic-gradient(from 0deg, ...) with an animated --angle custom property via @property for a true rotating sweep.

Make it yours

  • Change gradient stops by editing the linear-gradient(135deg, var(--a), var(--b)) — adding a third stop creates richer chromatic transitions.
  • Flip the sweep direction by changing background-position from right to left for a right-to-left reveal.
  • Use background-size: 300% with a very slow transition (1.2s) for an almost imperceptibly slow color melt.
  • Combine with letter-spacing expansion on hover so the gradient reveal accompanies a typographic opening motion.
  • For the shimmer variant, increase the keyframe speed to .6s for a snappier light-streak effect.

Gotchas — read before shipping

  • -webkit-background-clip: text requires color: transparent to be set simultaneously — forgetting this leaves the gradient invisible behind the solid text color.
  • The @property rule for the conic angle animation requires Chrome 85+ and Firefox 128+ — older browsers will see a static gradient instead of rotation.
  • Gradient text does not inherit from currentColor — you must explicitly define gradient stops; do not rely on CSS variable color inheritance alone.

Browser support

ChromeSafariFirefoxEdge
85+14+128+85+

@property conic animation needs Chrome 85+/Firefox 128+; all other variants work in Safari 14+ with the -webkit- prefix.

Techniques used in this demo

background-clip: textMDN ↗filterMDN ↗radial-gradient()MDN ↗grid-templateMDN ↗@keyframesMDN ↗clamp()MDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →