← Back to gallery
CSSFeatured

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.

Duration
4s
Resolution
1440×900
Format
CSS
shimmer-textgradient-textbackground-cliptext-fillfallback

Shimmer Text / Fallback-safe Fill

Starlight Shimmer Text

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

midnight title starlight shimmer active

Cool silver pass

Midnight Title

A silver-blue shimmer crosses the live text and leaves tiny decorative sparkles outside the accessibility tree.

A dark blue base surrounds a narrow white star band with soft cyan edges.

  • shimmer text
  • selectable text
  • decorative stars

Compact badge shimmer

Orbit Label

A tighter glint keeps badge-sized copy from becoming washed out while still signaling freshness or premium state.

The highlight core is narrow and the edge colors stay close to the fallback foreground.

  • badge text
  • tight glint
  • premium UI

Soft color shimmer

Aurora Wordmark

A starlight center rides through an aurora-toned gradient so the wordmark feels luminous without switching to image text.

Violet and cyan edges frame a white sparkle core, with enough background width to prevent loop jumps.

  • wordmark
  • aurora stops
  • screen-reader stable

Shimmer inspector

Midnight Title

Gradient logic
A dark blue base surrounds a narrow white star band with soft cyan edges.
Fallback
The text starts as readable ice blue and only becomes transparent inside @supports for background-clip:text.

This variant suits title moments where a shimmer should feel premium but the actual DOM text still needs to be selected and read normally.

css
.gradient-text {
  color: #dbeafe;
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .gradient-text {
    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: gradientTextSweep 4.2s linear infinite;
  }
}

@keyframes gradientTextSweep {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}

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