Super Boring Tools

Search tools

Find a tool by name or what it does.

Gradient Text Generator

Fill headings and words with a color gradient and copy the CSS.

Preview
Gradient text
Gradient type
Colors
Angle90deg
Font size56px
Font weight800
Fallback color

Shown where gradient text fills are not supported.

color: #6d28d9;
font-size: 56px;
font-weight: 800;
background-image: linear-gradient(90deg, #7c3aed, #ec4899);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;

How to create gradient text

  1. Type your text

    Enter the heading or word you want to style in the text field.

  2. Choose colors and style

    Set your gradient colors, switch between linear and radial, and adjust the angle.

  3. Tune size and weight

    Drag the size and weight controls until the preview looks right.

  4. Copy the CSS

    Copy the generated CSS and paste it onto your heading or text element.

Why use this tool

Live preview

See your words filled with the gradient as you edit colors, angle, size, and weight.

Linear and radial

Switch between a linear gradient with a chosen angle and a radial gradient that spreads from the center.

Multiple color stops

Add, remove, and recolor stops to build two color fades or richer multi color blends.

Fallback color

The CSS includes a solid fallback color so text stays readable where gradient fills are not supported.

Copy ready CSS

Output includes the vendor prefixed properties needed for the fill to show across browsers.

Private by design

Everything runs in your browser. Your text and colors never leave your device.

About this tool

Gradient text fills the shapes of your letters with a color blend instead of a single flat color. It is a popular way to make hero headings, logos, and callouts feel more designed without adding an image. This generator builds that effect for you and shows a live preview so you can judge the result before you copy anything.

The technique works by painting a gradient behind the text and then clipping that paint to the letter shapes, while the normal text color is made transparent so the gradient shows through. Because a transparent fill hides text where the effect is not supported, the generated CSS also sets a solid fallback color first. That way readers on older setups still see your words in a plain color.

You control the colors, the direction, and the shape of the blend. A linear style runs the colors along an angle you pick, which is ideal for a clean left to right or diagonal fade. A radial style spreads the colors outward from the center, which suits badges and short words. You can add extra color stops for a richer transition, adjust font size and weight to match your layout, and read the exact CSS at any time.

When you want a matching background block, try the gradient generator or the conic gradient generator. For glowing headings, the neon text generator pairs well with this tool.

Frequently asked questions

How does gradient text work?
A gradient is painted behind your text and then clipped to the letter shapes, while the text fill is made transparent so the gradient shows through. The generated CSS handles all of this for you.
Why does the CSS include a fallback color?
A transparent text fill would hide your words where gradient text is not supported. The fallback solid color is applied first so the text stays visible in those cases.
What is the difference between linear and radial?
A linear gradient blends the colors along a straight line at the angle you set. A radial gradient blends outward from the center in a circle, which works well for short words and badges.
Can I use more than two colors?
Yes. Add as many color stops as you like. Each stop gets its own color, and the blend flows smoothly from one to the next.
Does my text get uploaded anywhere?
No. The preview and the CSS are generated entirely in your browser, so your text and color choices never leave your device.

Related tools