Stripe Fill

Fill & Texture · Static · pure CSS

Bold repeating diagonal stripes filling the glyphs. Graphic, high-contrast and recolorable by hue and angle.

Open in the generator →All effects
Stripe Fill

CSS

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

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

.text-effect {
  background: repeating-linear-gradient(90deg,
    hsl(69 92% 62%) 0px, hsl(69 92% 62%) 9px,
    hsl(97 88% 40%) 9px, hsl(97 88% 40%) 18px);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 0 8px hsl(69 90% 50% / 0.4));
}

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

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

Related Fill & Texture effects