Starlight Shimmer Text

A shimmer text pattern that keeps the real text node selectable while a clipped gradient glint and separate decorative sparkle layer create a starlight pass.

shimmer-textgradient-textbackground-cliptext-fillfallback

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.

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.

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.

Sweep duration4.2s

Background span280%

Glow radius20px

.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%;
  }
}