CSS Gradient Text Generator

Fill text with a gradient

Text filled with a smooth colour gradient is a striking effect for headings and hero titles, and CSS can achieve it by painting a gradient and then clipping it precisely to the shape of the text. This generator builds the required CSS from your chosen colours, angle and font size, complete with a live preview, so you can see the effect before committing. Doing it by hand means stacking several easily-mistyped properties, which the generator handles for you.

How gradient text works

The technique paints a colour gradient as the background of the element, then clips that background tightly to the text so the gradient only shows through the shapes of the individual letters, with the actual text colour itself set to transparent so the gradient behind can show. It is a small but specific stack of properties, including vendor-prefixed ones needed for wide browser support, that are all too easy to get slightly wrong when typing them from memory, which is exactly why generating them reliably is worth doing.

Copy the CSS

It runs entirely in your browser, so nothing you enter is uploaded and the generated code is yours to paste straight into a project. Because it works client-side, you can iterate freely, regenerating as often as you like without a round trip to any server.

Related tools

• Color Converter — Convert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
• Accessibility Color Contrast Checker — Check foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
• Typography Scale Generator — Generate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.
• Design Token Generator — Generate design tokens as CSS variables, JSON or platform formats, structured in the layers that make them maintainable.