Gradient Shimmer Studio

Sweep multi-stop gradient light over text using the real Web Animations API shimmer component.

Gradient Shimmer Studio — sweep multi-stop gradient light over text using the real Web Animations API shimmer component.

How to use Gradient Shimmer Studio

  1. Type your headline text, then pick one of the eight gradient presets from the repo
  2. Or switch on a custom gradient and build your own multi-stop band with colour and position
  3. Tune the sweep: easing, duration, spread, angle, pause between sweeps and font size
  4. Pause or resume the live sweep and copy the band gradient CSS for other uses
  5. Copy the real GradientShimmer code and paste it into your project after npm install gradient-shimmer

Features

  • Real gradient-shimmer 0.1.1 code ported inline: buildBandGradient and all eight presets
  • Live Web Animations API sweep with measured spread, pause on scroll and reduced motion respect
  • Custom multi-stop gradient builder with up to six colour stops
  • Three easing presets with their real cubic bezier curves
  • Copy-ready GradientShimmer code plus the raw band gradient CSS

Frequently asked questions

Is it free?

Yes, unlimited.

Login to use this free online tool. Create a free account to get started.