Grain Gradient

How it works

Grain Gradient is a static fill & texture text effect rendered entirely in CSS. It relies on an inline SVG <defs> block (filters, gradients or clip-paths), which the HTML export carries alongside the CSS.

Controls

Grain Gradient exposes 3 dedicated controls — Hue, Hue Shift and Grain — on top of the shared type controls (font, weight, letter-spacing and case). Open it in the generator to tune every value live, then copy the updated CSS.

CSS

/* Grain Gradient — generated with TEXT-FX
 * HTML: requires the inline <svg> filter defs — see the HTML export.
 * Font: 'Bungee', cursive (load from Google Fonts).
 */

.text-effect {
  font-family: 'Bungee', cursive;
  font-weight: 700;
  letter-spacing: 0px;
  text-transform: uppercase;
}

.text-effect {
  background: linear-gradient(105deg, hsl(200 56% 70%), hsl(253 50% 62%));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: url(#text-effect-grain);
}

HTML

This effect needs the markup below (per-letter spans, SVG defs, or a data-text attribute).

<style>
.text-effect {
  font-family: 'Bungee', cursive;
  font-weight: 700;
  letter-spacing: 0px;
  text-transform: uppercase;
}

.text-effect {
  background: linear-gradient(105deg, hsl(200 56% 70%), hsl(253 50% 62%));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: url(#text-effect-grain);
}
</style>

<svg width="0" height="0" style="position:absolute" aria-hidden="true"><defs>
<filter id="text-effect-grain">
  <feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2" seed="3" stitchTiles="stitch" result="noise"/>
  <feColorMatrix in="noise" type="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.15 0" result="grain"/>
  <feComposite in="grain" in2="SourceGraphic" operator="in" result="textGrain"/>
  <feMerge>
    <feMergeNode in="SourceGraphic"/>
    <feMergeNode in="textGrain"/>
  </feMerge>
</filter>
</defs></svg>

<div class="text-effect">Your text</div>

Related Fill & Texture effects

• Image Fill
• Starfield
• Stripe Fill
• Halftone Dots
• Camouflage