Gradient text

Quick implementation

.gradient-text {
  background: linear-gradient(
    135deg,
    oklch(0.7 0.25 330),
    oklch(0.65 0.28 280),
    oklch(0.7 0.22 230)
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

Prompt this to your LLM

Paste this into ChatGPT, Claude, or any LLM to generate gradient text in your project.

Create a CSS gradient text effect for a heading. Use a linear-gradient
at 135deg with oklch colors (e.g. oklch(0.7 0.25 330) to oklch(0.7 0.22 230)).
Apply it with background-clip: text and -webkit-background-clip: text,
then set color to transparent. Include the -webkit-text-fill-color: transparent
fallback. The text should be bold, large, and have tight letter-spacing.

Why this matters

Gradient text turns a plain heading into a visual focal point without adding images or extra markup. It is purely decorative CSS — zero impact on the DOM, fast to render, and trivial to change. Combined with oklch colors you get perceptually uniform gradients that look smooth and vibrant across displays.

The logic

The trick works by painting a gradient as the element's background, then clipping that background to the text shape with background-clip: text. Setting color: transparent (plus the -webkit-text-fill-color prefixed equivalent) hides the solid text color so the gradient shows through. The gradient angle, color stops, and oklch hues can be adjusted freely — try rotating the hue values for completely different palettes.

Accessibility & performance

Screen readers see the plain text content — the gradient is purely visual. Ensure your gradient colors maintain sufficient contrast against the background (at least 4.5:1 for body text, 3:1 for large text). If the gradient dips too dark or light in the middle, add an extra color stop to keep contrast consistent. This technique uses a single paint operation with no compositing layers, so it has negligible performance cost.