HomeToolsGradient Text

CSS WORKSPACE

Gradient Text

Make a change, inspect the result, and take the output into your project.

How to use this tool ↓

Configuration

Presets
Gradient
45deg
0%
50%
100%
Typography
72px
Appearance
Live Preview
Gradient Text
Generated CSS
css
background: linear-gradient(45deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;

font-size: 72px;
font-weight: 800;
font-family: sans-serif;
text-align: center;
A PRACTICAL GUIDE

Use gradient text for a short, clear accent

Gradient text paints a background through the shape of letters. It can give a short heading an accent, but long paragraphs are harder to read when the color changes across every line. Keep a solid text color as the default and apply the effect only when the required clipping feature is supported.

How to use this tool

  1. Choose two colors that remain visible on the surrounding surface. Avoid a pale stop on a white page.
  2. Set the angle and compare the preview with your actual heading length and line breaks.
  3. Copy the gradient and clipping declarations together. Add a solid-color fallback and test high-contrast or forced-color settings.

The effect is introduced inside a feature query so unsupported environments keep the original text color. The forced-color override makes the heading follow the visitor’s chosen high-contrast palette.

Read the reference documentation ↗
Example to try in your project
.accent-heading { color: #1d4ed8; }
@supports (background-clip: text) {
  .accent-heading {
    background: linear-gradient(90deg, #1d4ed8, #7c3aed);
    background-clip: text;
    color: transparent;
  }
}
@media (forced-colors: active) {
  .accent-heading { background: none; color: CanvasText; }
}

Before you ship

If transparent text remains after the background is removed, the heading can disappear. Test print output and accessibility settings, and keep important body text in a solid color.

Explore a related tool