Gradient Text Generator

Gradient text is one of those CSS techniques that feels like cheating — you take a linear-gradient or radial-gradient, clip it to the shape of text characters, and suddenly your headings glow with a smooth colour transition that would have required an image editor twenty years ago. The technique has become a hallmark of modern SaaS landing pages, conference websites, and digital product marketing because it combines the crisp scalability of real text (selectable, searchable, responsive) with the visual impact of a custom graphic. The CSS behind gradient text is a three-step recipe that many developers learn by copy-pasting from Stack Overflow without understanding why each line is needed. Here is what actually happens: 1. **`background: linear-gradient(to right, #ff0080, #7928ca);`** — This sets the element\'s background to a gradient image. At this point, the gradient fills the entire bounding box of the element, behind the text. The text itself still has its normal solid colour. Nothing looks different yet. 2. **`-webkit-background-clip: text;`** — This is the magic line. The `background-clip` property controls how far a background extends within an element. The default value is `border-box` — the background goes to the outer edge of the border. The `text` value (which is only supported with the `-webkit-` prefix, even in Firefox and non-WebKit browsers) clips the background to the exact shape of the text characters. The gradient is now only visible inside the letter shapes. However, the text still has its own solid colour painted on top of the gradient, so you still see nothing. 3. **`-webkit-text-fill-color: transparent;`** — This makes the text\'s own fill colour transparent, so the background gradient clipped to the text shape becomes visible. The `-webkit-text-fill-color` property overrides the standard `color` property for the text fill specifically, leaving other text-related painting (like text-decoration lines) using the normal `color`. Setting it to `transparent` reveals the gradient underneath. Some developers use `color: transparent` instead, but this also makes text decorations transparent, which may not be desired. The result is selectable, copy-pastable text that renders with a gradient. Screen readers can still read it. Search engines can still index it. It scales to any font size and any screen resolution because it is vector text, not a raster image. This is a genuine CSS superpower, and it is why this tool exists — to let you design the gradient visually without remembering the incantation. This tool supports linear gradients with up to three colour stops (you can set 2 or 3 via the Add/Remove stop buttons). Each colour stop has its own colour picker. The gradient direction can be set either with an angle slider (0-360 degrees) or by clicking one of 8 directional preset buttons: to right (0 deg), to bottom (90 deg), to left (180 deg), to top (270 deg), to top right (45 deg), to bottom right (135 deg), to bottom left (225 deg), to top left (315 deg). The presets are mapped to standard CSS keywords (`to right`, `to bottom`, etc.) which are easier to reason about than angles for common designs. When you use the angle slider, the CSS output uses the `90deg` format; when you use a preset, the output uses the keyword format. Three colour stops are particularly powerful because they enable a highlight effect — a bright colour in the middle sandwiched between two darker colours creates the illusion of a light source moving across the text. For example, #7928ca → #ff0080 → #7928ca (purple → pink → purple) creates a centre glow. Two colour stops produce a simple blend from one colour to another, which is cleaner and often more readable for longer text. The text content input and font size slider work the same as in the Text Shadow Generator: type your own words to see how the gradient interacts with your specific text. Font weight is also adjustable — bold text has thicker glyph strokes and shows more of the gradient, making it appear more saturated, while thin/light text shows less gradient and can appear too subtle. Experimenting with font weight is important because a gradient that looks striking on a 700-weight heading can look washed out on 400-weight body copy. One important limitation to understand: the `-webkit-background-clip: text` technique only works when the background is set directly on the text element, not on an ancestor. That means you cannot apply a gradient background to a parent `<div>` and expect the child `<h1>` to inherit the gradient clipping — the `background` and `-webkit-background-clip` must be on the same element that contains the text. This tool\'s output respects this by producing a single CSS rule targeting the element directly. Fallback behaviour in browsers that do not support the prefixed properties (essentially none in 2026, but for completeness): the text renders in the element\'s normal `color` value. To ensure legibility everywhere, this tool includes a `color` fallback (the first colour stop\'s colour) alongside the gradient declarations. This way, if a browser ignores `-webkit-text-fill-color: transparent`, the text falls back to a solid colour rather than disappearing entirely. This is a best practice that many gradient-text tutorials omit.