Duotone Fill

Gradient Fill · Static · pure CSS

A crisp two-color split gradient filling the glyphs via background-clip. Bold, poster-like, and endlessly recolorable by hue.

Open in the generator →All effects
Duotone Fill

CSS

/* Duotone Fill — generated with TEXT-FX
 * HTML: just put the class on any element.
 * Font: 'Space Grotesk', sans-serif (load from Google Fonts).
 */

.text-effect {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: none;
}

.text-effect {
  background: linear-gradient(45deg, hsl(208 90% 66%) 0%, hsl(208 90% 66%) 58%, hsl(13 90% 58%) 58%, hsl(13 90% 58%) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

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

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

Related Gradient Fill effects