Text that runs & the entire spectrum.

Every font, preset, angle, and OKLCH triple.

A gradient only reads as well as the glyph it is clipped to: stroke contrast, counter size, and angle all decide how much of the color ramp survives. The lookups here cover the rest of that build: every font in the picker with the weights it actually ships, the exact stop values behind each preset, the angle keywords that map to the cardinal directions, and a starting OKLCH triple for each hue family so you can dial perceptual color without guessing. Every number matches what the tool requests from the CDN and writes into the copied CSS.

The picker requests a small weight subset per family to keep the CDN payload light, so the weight dropdown only shows what is listed here. A face with a single weight (Anton, Bebas Neue, the Display serifs) has no weight control to adjust.

Inter is the default and the only family that renders without a CDN request, so the first paint never waits on fonts.googleapis.com.

A gradient reads off the glyph, so stroke contrast and counter size decide how much of the color ramp survives. Faces with thin hairlines lose the mid-stops; sturdy faces show every band.

At small sizes (under ~32px) drop to two stops; intermediate stops compress into a few pixels and read as a single muddy band regardless of face.

Each preset drops a full gradient into the builder: type, angle, and the exact stops below. All twelve ship as linear HEX gradients. Positions are percentages along the angle.

A reusable preset declaration looks like this once clipped to text:

/* Sunset Glow */
background: linear-gradient(90deg, #f97316 0%, #ec4899 60%, #a855f7 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;

The two-stop presets (Neon Noir, Forest Mist, Mono Slate, Cyber Lime) are the safe pick for body-weight or small text; the three-stop presets want a display weight at headline size.

The linear angle field takes 0–360. These keyword presets correspond to fixed angles, and the same numbers apply whether you type them or click a direction.

CSS angle 0 points up and increases clockwise, which is the opposite of trig convention. A value typed as 90 sweeps left to right across the text. Switching to radial drops the angle entirely; the gradient centers on the text and the angle field hides because radial-gradient() takes no angle.

OKLCH is oklch(L C H): lightness 0–1, chroma 0–0.4, hue 0–360 degrees. When a stop is in OKLCH mode the tool emits oklch() and writes a HEX-equivalent fallback comment. Use these as a starting triple, then nudge lightness and chroma per stop.

Two rules keep an OKLCH ramp clean. Hold lightness within about 0.15 across stops so no single stop goes dark and swallows a glyph segment. Keep chroma near the gamut edge per hue (yellow and green tolerate less chroma than magenta and violet) or the color clips to a flatter sRGB value when the fallback fires.

A two-stop gradient interpolates every channel between the stops. In sRGB the path between two saturated complementary colors passes through low saturation near the middle, which is the gray band you see on a red-to-green or magenta-to-cyan ramp. OKLCH interpolates lightness, chroma, and hue independently, so chroma stays high across the transition and the hue rotates along the shorter arc of the color wheel.

sRGB    magenta ──▶ [desaturated gray] ──▶ cyan
OKLCH   magenta ──▶ [chroma held high]  ──▶ cyan

The effect is invisible on adjacent hues (blue to violet) and strongest on opposing hues (the magenta-to-mint and red-to-green pairs). Reach for OKLCH when two stops sit far apart on the wheel; for a tight two-hue ramp the HEX fallback looks nearly identical.

When a non-default font is active the copied CSS leads with an @import for that family at the active weight. The request encodes the family name with + for spaces and the weight after wght@.

@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@800&display=swap');

Multiple weights join with semicolons inside the wght@ axis (wght@400;700). The display=swap flag shows the fallback face until the web font loads instead of leaving the text invisible during the fetch. The tool requests only the single active weight to keep the import small.

The same stop and interpolation rules apply to element backgrounds via Graduo; font pairing for the headline comes from TypeDuo.