CSS Gradient Text Generator

CSS gradient text is text whose glyphs are filled with a color gradient instead of a single solid color. The technique paints a gradient as the background of the text element and then clips that background to the shape of the letters. Because the background only shows through the glyphs, the result looks like the text itself was painted with a gradient.

The effect is built from a small set of cooperating properties. background holds the gradient, background-clip: text (plus the -webkit- prefixed version for Safari) restricts the paint to the text, and -webkit-text-fill-color: transparent makes the text itself see-through so the gradient is visible. A solid color is included as a fallback for browsers that do not support clipping.

This generator supports three gradient shapes. A linear-gradient runs along an angle you choose, a radial-gradient spreads outward in a circle, and a conic-gradient sweeps around a center point starting from a chosen angle. The angle slider only affects linear and conic gradients, since a radial gradient is defined purely by its circular shape.

Everything runs client-side. You can type your own preview text, pick two colors with the color pickers or type hex values directly, and the CSS output updates instantly. The tool ships a ready-made .gradient-text class, so you can copy it into a stylesheet and reuse it wherever you need the effect.

Key Concepts

• background-clip: text — clips the gradient background to the shape of the glyphs.
• -webkit-text-fill-color: transparent — exposes the gradient by making the fill transparent.
• Linear gradient — a directional blend along an angle from 0 to 360 degrees.
• Radial gradient — a circular blend that spreads outward from the center.
• Conic gradient — a blend that sweeps around the element from a starting angle.
• Solid color fallback — a plain color value keeps the text readable in older browsers.

1. Load a preset or start fresh — Choose one of the six presets from the dropdown, or leave it empty to build from the current colors.
2. Choose the gradient type — Select Linear, Radial, or Conic to control how the colors blend.
3. Pick the two colors — Use the color pickers or type hex values into the Color 1 and Color 2 fields.
4. Adjust the angle and text — Drag the angle slider for linear and conic gradients and edit the preview text.
5. Copy the CSS class — Click Copy CSS and paste the generated .gradient-text rule into your stylesheet.

Gradient text is a quick way to add visual interest without images. These are the situations where it is used most often.

1. Hero headings — make a landing-page headline stand out with a bold two-color fill.
2. Logo wordmarks — give a text logo a signature gradient that matches the brand palette.
3. Call-to-action labels — draw the eye to buttons and links with a subtle gradient.
4. Section titles — separate major content blocks with colored headings.
5. Pricing highlights — emphasize a featured plan name or price.
6. Social graphics — reuse the exported class in HTML templates for share images.