GODRICH
#css-animation#button#loader#transition#scroll#dashboard#ui#design-trends

9 CSS Text Shine Animation Effects — Copy-Paste

· Godrich · 9 items · 20 min read

FeedbackSCSSCSS onlyAutoplayHero section

Each of these nine css text shine animation effects clips a moving gradient, a glow, or a spinning hue onto plain letters — one line, copy-paste, no image file

Flowing gradient text01 text-gradient-shine-gradient-text-flow Gradient angle move02 text-gradient-shine-gradient-move Neon glow text03 text-gradient-shine-neon-glow-text Shine sweep text04 text-gradient-shine-shine-sweep-text Glitch text05 text-gradient-shine-glitch-text Chrome metal text06 text-gradient-shine-chrome-metal-text Flicker text07 text-gradient-shine-flicker-text Outline glow08 text-gradient-shine-outline-glow Rainbow text cycle09 text-gradient-shine-rainbow-text

Auto-plays · click a tile to jump to its section · all nine in one zip

The order below follows what happens to the color, not how flashy an item looks. 01 and 02 move a gradient through the letters — sideways, then rotating. 03 and 04 use light rather than color to make a word stand out: a glow behind it, then a css shine text effect sweeping across it. 05 and 06 treat the letters as a surface that can misbehave or reflect — a broken scanline, then a chrome sheen. 07 and 08 work letter by letter, one flickering and one emptied out to a bare outline. 09 closes the set by spinning the entire hue wheel through a fixed rainbow. Every demo above sits in a small, non-scrollable iframe and loops on its own, since there is nothing in a 480×300 frame to click or hover. The heading text in each demo below is a placeholder — swap the string inside the <h1> for a real headline and every rule keeps working exactly as written. When the surface under that headline is a tile rather than a bare stage, the CSS card hover effects set covers the container, and the same clipped gradient shrunk down to a control lives in the CSS toggle switches demos.

01Flowing gradient text

How it works

A blue-to-cream gradient is clipped to the letters with background-clip: text, then background-position slides back and forth across a background-size set to 300% of the element's own width.

Where it fits

Because the gradient is so much wider than the text, the visible slice keeps changing color as it scrolls, reading as color flowing through the letters rather than a gradient sitting still behind them.

Flowing gradient text
Open in a new tab

01 · Flowing gradient text — Measured area 3.461% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

background-clip:textbackground-position2s
.flow {
  background: linear-gradient(90deg, $color, $subject-cream, $color, $subject-cream, $color);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: flow $duration $easing infinite;
}
@keyframes flow {
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

02Gradient angle move

How it works

@property registers --angle as a typed <angle> custom property, so the browser can interpolate it smoothly instead of snapping between values.

Where it fits

That typed variable sits in linear-gradient()'s own angle slot and turns from 0deg to 360deg on a loop, which spins the gradient itself inside the letters rather than moving its position.

Gradient angle move
Open in a new tab

02 · Gradient angle move — Measured area 3.865% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

@property<angle>linear-gradient
@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.spin {
  --angle: 0deg;
  background: linear-gradient(var(--angle), $color, $stage-orange, $color);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rotate-angle $duration $easing infinite;
}
@keyframes rotate-angle {
  from { --angle: 0deg; }
  to   { --angle: 360deg; }
}

03Neon glow text

How the css text glow animation stacks

A second copy of the same letters sits behind the visible text via ::before, inherits the same gradient, and only ever gets filter: blur() applied to it.

Where it fits

The blur radius and opacity swing between a dim and a bright step several times per loop, so the glow reads as breathing rather than a neon tube switching fully off and on.

Neon glow text
Open in a new tab

03 · Neon glow text — Measured area 10.16% · moving frames 12/23Original by GODRICH · SCSS and React ship in the zip · See the password

filter:blur다색 그러데이션숨쉬는 글로우
.neon {
  position: relative;
  isolation: isolate;
  background: linear-gradient(90deg, $color, $subject-cream);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.neon::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  z-index: -1;
  background: inherit;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: blur(8px);
  animation: breathe $duration linear infinite;
}
@keyframes breathe {
  0%, 10%  { filter: blur(4px);  opacity: .28; }
  15%, 25% { filter: blur(20px); opacity: 1; }
}

04Shine sweep text

How it works

The same word is stacked twice: the bottom copy stays a flat solid color, and only the top copy is clipped to a narrow, bright diagonal band with background-clip: text.

Where it fits

background-position carries that band across the letters once per loop, so light appears to graze a metal surface rather than glow evenly.

Shine sweep text
Open in a new tab

04 · Shine sweep text — Measured area 2.915% · moving frames 6/23Original by GODRICH · SCSS and React ship in the zip · See the password

background-position 스윕대각선 하이라이트2s
.light {
  background: linear-gradient(100deg, transparent 42%, rgba($stage-paper, .95) 50%, transparent 58%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: sweep $duration $easing infinite;
}
@keyframes sweep {
  0%  { background-position: 140% 50%; }
  60% { background-position: -40% 50%; }
}

05Glitch text

How it works

Two color-shifted copies sit in mix-blend-mode: screen, each carrying a striped mask-image whose position jumps on steps() timing instead of easing, which breaks the letters into scanlines that snap rather than slide.

Where it fits

A short filter: hue-rotate spike fires at the same instant to shift the color, with no clip-path slicing involved anywhere.

Glitch text
Open in a new tab

05 · Glitch text — Measured area 2.345% · moving frames 6/23Original by GODRICH · SCSS and React ship in the zip · See the password

mask-image steps()hue-rotate스캔라인
.r, .b {
  position: absolute;
  inset: 0;
  mix-blend-mode: screen;
  -webkit-mask-image: repeating-linear-gradient(to bottom, #000 0 3px, transparent 3px 7px);
  mask-image: repeating-linear-gradient(to bottom, #000 0 3px, transparent 3px 7px);
  animation: mask-jump-r $duration steps(1) infinite;
}
@keyframes mask-jump-r {
  0%, 40%, 100% { -webkit-mask-position: 0 0;   mask-position: 0 0;   opacity: 0; }
  45%, 55%      { -webkit-mask-position: 0 3px; mask-position: 0 3px; opacity: .9; }
}
.tint {
  animation: hue-jab $duration steps(1) infinite;
}
@keyframes hue-jab {
  0%, 44%, 100% { filter: hue-rotate(0deg); }
  47%           { filter: hue-rotate(35deg); }
}

06Chrome metal text

How it works

Dark, white, and cream stops alternate at tight intervals inside one gradient, clipped to the letters the same way as item 01, but background-position here eases to a stop at the end of each loop instead of sliding at item 01's constant linear speed.

Where it fits

The tight alternation is what sells the metal — a wide, soft gradient would just look like a colored glow instead of a reflective surface.

Chrome metal text
Open in a new tab

06 · Chrome metal text — Measured area 3.683% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

다중 스톱 그러데이션background-position2s · ease-out
.chrome {
  background: linear-gradient(
    100deg,
    $color 0%, $stage-paper 12%, $color 24%,
    $subject-cream 40%, $stage-paper 52%, $color 64%,
    $stage-paper 80%, $color 100%
  );
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: reflect $duration $easing infinite;
}
@keyframes reflect {
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

07Flicker text

How it works

Each letter is wrapped in its own span, and a --i custom property multiplied inside animation-delay gives every letter a different starting point on the same short opacity keyframes.

Where it fits

Because the delay lives on the letter, not a shared parent, the whole word never dims at once — it flickers letter by letter, closer to an old marquee sign than a single neon tube.

Flicker text
Open in a new tab

07 · Flicker text — Measured area 2.881% · moving frames 10/23Original by GODRICH · SCSS and React ship in the zip · See the password

--i 지연opacity 왕복글자별 독립
.marquee span {
  display: inline-block;
  color: $color;
  animation: bulb $duration $easing infinite;
  animation-delay: calc(var(--i, 0) * 120ms);
}
@keyframes bulb {
  0%, 40%, 100% { opacity: 1; }
  47%           { opacity: .22; }
  54%           { opacity: 1; }
}

08Outline glow

How it works

color: transparent empties the letter fill entirely, -webkit-text-stroke draws a thin outline in its place, and filter: drop-shadow() is the only thing left animating — its radius widens and narrows so light spreads outward from the stroke and pulls back in.

Where it fits

Nothing about the fill or the stroke width itself ever changes.

Outline glow
Open in a new tab

08 · Outline glow — Measured area 15.976% · moving frames 7/23Original by GODRICH · SCSS and React ship in the zip · See the password

-webkit-text-strokedrop-shadow빈 윤곽선
.outline {
  color: transparent;
  -webkit-text-stroke: 2px $color;
  animation: glow $duration $easing infinite;
}
@keyframes glow {
  0%, 100% { filter: drop-shadow(0 0 3px rgba($color, .5)); }
  50% {
    filter: drop-shadow(0 0 14px rgba($color, .9))
            drop-shadow(0 0 26px rgba($color, .5));
  }
}

09Rainbow text cycle

How it works

A fixed multicolor gradient is clipped to the letters and never moves — no background-position, no angle change.

Where it fits

Instead filter: hue-rotate turns continuously from 0deg to 360deg, so the whole color wheel cycles through the same static band of letters rather than the gradient itself sliding anywhere.

Rainbow text cycle
Open in a new tab

09 · Rainbow text cycle — Measured area 4.147% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

filter:hue-rotate고정 그러데이션360° 순환
.rainbow {
  background: linear-gradient(90deg, $color, $stage-yellow, $stage-orange, $error, $subject-cream, $color);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: hue-cycle $duration linear infinite;
}
@keyframes hue-cycle {
  from { filter: hue-rotate(0deg); }
  to   { filter: hue-rotate(360deg); }
}

Where it breaks — prefixes, @property, and a glow that vanishes

The glow that vanishes

Item 03's glow layer is the trap this set actually shipped with once: drop the isolation: isolate line from .neon and the ::before copy doesn't just look dimmer, it disappears completely. That ::before carries z-index: -1 so it paints behind the visible letters, but a negative z-index only stays inside its own parent's stacking context when that parent actually opens one. Without position: relative plus isolation: isolate on .neon, the pseudo-element's stacking context folds into whatever ancestor owns one first — here, the .stage backdrop — and the glow ends up painted below the entire demo background instead of just behind its own letters. MDN's isolation reference covers how a new stacking context keeps a layer's z-order scoped to its own parent.

Why the -webkit- lines stay

The seven items built on background-clip: text (01, 02, 03, 04, 05, 06, and 09) still carry the -webkit- line for a real reason, not habit. Checking MDN's compatibility data for background-clip shows Chrome and Edge only accepted the unprefixed text value starting at version 120, while Safari picked it up earlier, at version 14 — before those versions, -webkit-background-clip: text was the only spelling either engine understood. Firefox has supported it unprefixed since version 49, with MDN's own compatibility notes flagging some edge cases around background-attachment: fixed that these nine demos never touch. Item 05's mask-image carries the same doubling for the same reason: MDN's compatibility data for mask-image puts unprefixed support at Chrome and Edge 120, Safari 15.4, and Firefox 53, so -webkit-mask-image and -webkit-mask-position stay next to the standard lines.

What @property needs

Item 02's @property block asks for more: caniuse's @property table lists support from Chrome and Edge 85, Safari 16.4, and Firefox only as recently as version 128. On anything older, the <angle> custom property just fails to register, --angle stops interpolating between keyframes, and the gradient holds still at whatever angle it started instead of rotating — the text still reads fine, it just never spins. Item 06's chrome sheen scaled up to full sections behaves the same way in the Y2K chrome holographic kit, where the still metal gradient is the baseline and the rotation is the bonus. Every file in this set, unpacked and already measured after render, sits behind 5hzhmkcb typed exactly as it appears right here, nothing added and nothing trimmed off either end.

Accessibility

Where each one parks

All nine turn off their looping animation under prefers-reduced-motion: reduce, and each settles on its own fixed value rather than one shared default. 01, 02, and 06 park their moving gradient or angle at a mid-cycle position — background-position: 40% 50% for 01 and 06, --angle: 45deg for 02 — chosen so the letters stay fully colored instead of sitting at either extreme. 04's shine band settles at background-position: 50% 50%, off to the side of its sweep, so no stray highlight freezes across the letters. 09 works differently: it resets hue-rotate all the way back to 0deg, the exact start of its loop, rather than stopping partway around the color wheel. 03 and 08 both settle on a fixed, clearly visible glow instead of their dimmest step — blur(10px) at .85 opacity for 03, a single 14px drop-shadow for 08 — so neither reads as broken or half-rendered. 05 takes the opposite approach: its two color-shifted mask layers drop straight to opacity: 0, so reduced motion doesn't freeze the glitch mid-jump, it removes the distortion entirely and leaves the plain base gradient underneath. 07's flicker stops outright and every letter locks to full opacity together, closing the one gap where reduced motion could otherwise leave part of a word invisible.

Contrast for low vision

Because 03 and 08 lean on filter: blur() or stacked drop-shadow() for contrast rather than a flat text color, pairing either with a plain, solid-color fallback matters more than usual for low-vision readers on a washed-out monitor. MDN's prefers-reduced-motion page documents the operating-system toggle behind that media query.

More CSS-only effects like these live on the CSS category hub, and what this site does and doesn't sell is on the about page.

FAQ

Do I still need the -webkit- prefix for a css text shine animation built on background-clip?

Yes, for now. Chrome and Edge only dropped the requirement at version 120 and Firefox has a handful of documented edge cases even where it works unprefixed, so leaving -webkit-background-clip: text next to the standard line costs nothing and keeps older installs from showing solid black text instead of a gradient.

Why did my copy of item 03's glow disappear instead of just looking dimmer?

isolation: isolate on .neon is doing real work there, not decoration — without it, the z-index: -1 glow layer stacks behind the demo's entire background rather than just behind its own letters. Add position: relative; isolation: isolate; to whatever element wraps the glowing text and the layer comes back.

Can several css gradient text animation layers run on the same headline at once?

Technically, but it costs more than it's worth. Stacking background-clip: text with filter: blur() or a mask-image piles up extra layers the browser has to repaint every frame, and that shows up first as stutter on lower-end phones. One effect per headline holds up better than layering two or three for a busier look. To keep the extra color without the extra text layer, move it off the letters and onto the frame with the CSS border animations set instead.

Enter the archive password

The password is inside this article. You will find it as you read.