Gradient Flow

Gradient Fill · Animated · pure CSS

A multi-stop gradient clipped to the text that slowly flows by animating its background position. The go-to lively gradient headline.

Open in the generator →All effects
Gradient Flow

CSS

/* Gradient Flow — generated with TEXT-FX
 * HTML: just put the class on any element.
 * Font: 'Bricolage Grotesque', sans-serif (load from Google Fonts).
 */

.text-effect {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 900;
  letter-spacing: 0px;
  text-transform: none;
}

.text-effect {
  background: linear-gradient(283deg, hsl(307 95% 60%), hsl(7 95% 58%), hsl(97 95% 62%));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  background-size: 220% 220%;
}

Pure CSS — just add the .text-effect class to any element.

Category
Gradient Fill
Type
Animated
Browser support
background-clip:text (all modern, -webkit- prefixed)
Capabilities
pure

Related Gradient Fill effects