← Back to gallery
CSSFeatured

Starlight Shimmer Text

Build a starlight shimmer text effect with background-clip text, gradient sweep, sparkle accents, drop-shadow glow, supports fallback, and reduced motion.

Original clean-room implementation by Animation Patterns. Code examples are available under CC BY 4.0.

shimmer-textgradient-textbackground-clipsparklesdrop-shadowsupports-fallbackprefers-reduced-motion

Implementation depth

Starlight shimmer works best as a single premium accent, not a page-wide treatment. Keep the readable text intact and use clipped gradients plus small decorative sparkles to add motion without fragmenting the word.

Drop-shadow and sparkle layers can quickly overpower the glyphs. Under reduced motion, pause the shimmer at a balanced highlight position and remove sparkle drift so the headline still reads as deliberate styling.

Interactive examples

Shimmer Text / Fallback-safe Fill

A narrow starlight highlight sweeps through selectable text while the glow and decorative sparkles stay in separate layers from the real content.

Cool silver pass

Midnight Title

A silver-blue starlight crosses readable ice blue text with a peak dwell at center while decorative sparkles flash with the shine. Suits title moments where the shimmer should feel premium but the DOM text remains selectable and screen-reader stable.

  • shimmer text
  • selectable
  • peak dwell

Compact badge shimmer

Orbit Label

A twin-glint flashes badge-sized copy in quick succession then holds quiet so the text feels actively maintained without becoming distracting. Use a tighter background span for compact labels so the shimmer remains visible without forcing a larger text box.

  • badge text
  • twin glint
  • idle hold

Soft color shimmer

Aurora Wordmark

A starlight center breathes continuously through an aurora-toned gradient so the wordmark feels luminous without switching to image text. Ambient sparkles twinkle independently below the word, adding starscape feel without demanding attention.

  • wordmark
  • ambient breathing
  • twinkle

Shimmer inspector

Midnight Title

  • shimmer text
  • selectable
  • peak dwell

A silver-blue starlight crosses readable ice blue text with a peak dwell at center while decorative sparkles flash with the shine. Suits title moments where the shimmer should feel premium but the DOM text remains selectable and screen-reader stable.

Helped you ship something? 🐟 Send my cat a churu

.starlight {
  color: #dbeafe;
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .starlight {
    background-image: linear-gradient(100deg, #b7c6e6 0%, #dbeafe 38%, #ffffff 49%, #67e8f9 53%, #dbeafe 62%, #b7c6e6 100%);
    background-size: 280% 100%;
    background-position: 0% 50%;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 20px rgba(103, 232, 249, 0.36);
    animation: starlight-midnight 4.2s cubic-bezier(0.55, 0.05, 0.25, 1) infinite;
  }
}

/* Single dramatic pass with cubic-bezier slowdown around the center; glow + brightness peak together. */
@keyframes starlight-midnight { /* full keyframe in slug css */ }

@media (prefers-reduced-motion: reduce) {
  .starlight {
    animation: none;
    background-position: 50% 50%;
  }
}

How to make this

A CSS starlight shimmer text effect keeps the real text in the DOM, clips a wide linear gradient to the glyphs, and runs sparkle layers as aria-hidden decoration.

html
<h1 class="starlight-title">2  <span class="starlight-title__sparkles" aria-hidden="true">    <span></span><span></span><span></span>  </span>  <span class="starlight-title__text">Starlight</span></h1> <style>.starlight-title {  position: relative;  display: inline-grid;  place-items: center;  margin: 0;  padding: 1rem 1.25rem;  background: #07111f;}.starlight-title__text {18  position: relative;  z-index: 1;  color: #dbeafe;  font: 800 3rem/1 ui-sans-serif, system-ui;}23@supports ((background-clip: text) or (-webkit-background-clip: text)) {  .starlight-title__text {    background-image: linear-gradient(100deg,      #b7c6e6 0%, #dbeafe 38%, #fff 49%,      #67e8f9 53%, #dbeafe 62%, #b7c6e6 100%);28    background-size: 280% 100%;    background-position: 0% 50%;    background-clip: text;    -webkit-background-clip: text;    color: transparent;    -webkit-text-fill-color: transparent;34    text-shadow: 0 0 20px rgba(103, 232, 249, .34);    animation: starlight-recipe-sweep 4.2s cubic-bezier(.55,.05,.25,1) infinite;  }}.starlight-title__sparkles {  position: absolute;  inset: 0;  pointer-events: none;}.starlight-title__sparkles span {  position: absolute;  width: 4px;  height: 4px;  border-radius: 999px;  background: #fff;  box-shadow: 0 0 12px rgba(165, 180, 252, .7);  animation: starlight-recipe-sparkle 2.8s ease-in-out infinite;}.starlight-title__sparkles span:nth-child(1) { left: 12%; top: 20%; }.starlight-title__sparkles span:nth-child(2) { right: 18%; top: 62%; animation-delay: -.8s; }.starlight-title__sparkles span:nth-child(3) { left: 48%; bottom: 8%; animation-delay: -1.6s; }@keyframes starlight-recipe-sweep {  0%, 100% { background-position: -10% 50%; filter: brightness(.95); }  50% { background-position: 55% 50%; filter: brightness(1.14); }}@keyframes starlight-recipe-sparkle {  0%, 100% { opacity: .18; transform: scale(.7); }  50% { opacity: 1; transform: scale(1.25); }}@media (prefers-reduced-motion: reduce) {  .starlight-title__text,65  .starlight-title__sparkles span { animation: none; }  .starlight-title__text { background-position: 50% 50%; }}</style>

Annotated snippet

  1. Line 2The sparkle layer is decorative, so it is hidden from assistive technology. The phrase itself remains a normal text node instead of being replaced by an image or generated content.
    PitfallHow do I keep shimmer text accessible to screen readers?

    Render the phrase as real DOM text and keep sparkle or glow helpers aria-hidden. Avoid putting the only readable word in ::before, ::after, canvas, or an image; those variants break copy, selection, and assistive technology.

  2. Line 18The plain color is the fallback. Put it before the feature query so unsupported background-clip implementations still render readable text.
    PitfallWhy does background-clip shimmer text disappear in some browsers?

    The usual bug is applying color: transparent before checking support. Keep a readable color as the default, then move transparent text fill and background-clip into an @supports block that includes the -webkit-prefixed form.

  3. Line 23The gradient text branch is isolated in @supports. That prevents the common failure mode where color: transparent ships to browsers that cannot clip backgrounds to glyphs.
    PitfallWhy does background-clip shimmer text disappear in some browsers?

    The usual bug is applying color: transparent before checking support. Keep a readable color as the default, then move transparent text fill and background-clip into an @supports block that includes the -webkit-prefixed form.

  4. Line 28A wide background-size gives the highlight room to cross the word as a narrow glint. A 100% background paints a static rainbow fill instead of a moving starlight pass.

    Same background-position 0% → 100% animation on both. A 100% gradient has no off-canvas runway, so the sweep just slides colors across the glyphs evenly. A 280% gradient with concentrated white at the centre creates a narrow glint that travels across the word.

    PitfallCan I use this on body copy?

    Use it sparingly. Shimmer is a display treatment for short labels or headings; long paragraphs with moving gradients reduce readability and can make selection highlights hard to inspect.

  5. Line 34The text shadow belongs to the clipped text, not to a pseudo-element copy. It adds glow without creating duplicate readable content.
    PitfallHow do I keep shimmer text accessible to screen readers?

    Render the phrase as real DOM text and keep sparkle or glow helpers aria-hidden. Avoid putting the only readable word in ::before, ::after, canvas, or an image; those variants break copy, selection, and assistive technology.

  6. Line 65Reduced motion stops both the gradient sweep and the sparkles. The text stays visible because the fallback color and centered gradient state still describe the same word.
    PitfallWhat should prefers-reduced-motion do for shimmer text?

    Stop the sweep and sparkle animations, then hold a readable static state. Do not remove the text or leave it transparent; motion-sensitive users still need the same visible heading.

Other pitfalls

Is animated shimmer text expensive?
It can be if it covers large headings, combines heavy filters, or runs across many elements. Keep the animated region small, prefer background-position over layout properties, and avoid stacking multiple large text-shadow or blur layers.

Notes

Overview

Starlight shimmer pairs a clipped gradient glint on live text with a decorative sparkle layer of varying-size dots, the brightest of which carry diffraction spikes drawn from ::before + ::after pseudos. Three cadences ship as variants: a dramatic single midnight pass, an orbit-sync twin glint reminiscent of a notification ping, and an ambient continuous drift that never peaks.

When to use it

Reach for starlight shimmer when a premium product label, section header, or marketing CTA wants a tasteful celebratory accent. The glint is brief enough to feel intentional rather than gaudy. Skip it for utility text, error states, or any copy that needs to read as serious or alarming — the sparkles read as friendly and they will defang the message.

How it works

The base text is one live span clipped by a background-gradient via background-clip: text, same mechanism as gradient text sweep. The shimmer band moves across the gradient on a slow cycle so the highlight crosses the glyphs without a hard seam. The sparkle layer is a single decorative span containing twelve small <span> dots positioned via individual CSS keyframes (so each twinkle on a different phase). Three of the dots wear a --bright modifier that mounts diffraction spikes via pseudo elements with transform: rotate(45deg).

Production gotchas

Sparkle layer can flicker on lower refresh-rate monitors if each dot uses an extremely short cycle — keep individual twinkle keyframes above 1.4s to avoid strobe risk. The diffraction spike pseudo-elements rely on transform-origin: center; if a sparkle is absolutely positioned with non-zero transform on the parent, the spikes can offset from the dot centre and ruin the cross illusion. Stacking contexts: clipped text and the sparkle layer should share a parent that owns the gradient stops so the two animations stay synchronized to the same custom property.

Accessibility

The shimmer band animation is purely decorative; prefers-reduced-motion: reduce pauses it with the gradient pinned mid-sweep so the text reads as gradient-clipped but static. The sparkle layer is aria-hidden="true" and pointer-events: none — AT users hear only the live text. Sparkle motion is fine for most vestibular sensitivities because the dots are small and stationary (twinkle is opacity-only, not translate).

References

Related patterns