~/css/gradient-text

7 CSS Gradient Text Designs

7 Pure CSSPublished 2026-10-05Free · no sign-up

Seven ways to fill text with colour: a gradient headline, one gradient word inside a plain sentence, an animated flowing gradient, letters filled with stripes, a conic rainbow, gradient text with a solid offset shadow and a link whose gradient sweeps in on hover.

Filter demos

01. Gradient Headline

Gradient textTypography

The core technique: a gradient background clipped to the text with background-clip: text and a transparent text colour. A solid colour is set first as a fallback, and both gradient stops are dark enough to pass contrast on white.

View code

<h3 class="gt1">Design without limits</h3>

.gt1 { margin: 0; color: #4338ca; font: 900 36px/1.1 Inter, system-ui, sans-serif; text-align: center; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) { .gt1 { background: linear-gradient(90deg, #4338ca, #be185d); -webkit-background-clip: text; background-clip: text; color: transparent; } }

02. One Gradient Word in a Sentence

Gradient textEmphasis

Only the key word gets the gradient, inside an otherwise plain white headline, which is usually more effective than colouring the whole line. The word is wrapped in a span so the effect stays a styling choice.

View code

<h3 class="gt2">Build sites that <span>convert</span>.</h3>

.gt2 { margin: 0; color: #f8fafc; font: 900 34px/1.15 Inter, system-ui, sans-serif; }
.gt2 span { color: #67e8f9; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) { .gt2 span { background: linear-gradient(90deg, #67e8f9, #a78bfa, #f472b6); -webkit-background-clip: text; background-clip: text; color: transparent; } }

03. Flowing Gradient Text

Gradient textAnimation

The gradient inside the letters drifts sideways because the clipped background is wider than the text and its position animates. It stops for reduced motion, and the colours stay light enough to read on dark at every moment.

View code

<p class="gt3">Aurora</p>

.gt3 { margin: 0; color: #a5f3fc; font: 900 56px Inter, system-ui, sans-serif; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) { .gt3 { background: linear-gradient(90deg, #a5f3fc, #c4b5fd, #f9a8d4, #a5f3fc) 0 0 / 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: gt3 6s linear infinite; } }
@keyframes gt3 { to { background-position: 300% 0; } }
@media (prefers-reduced-motion: reduce) { .gt3 { animation: none; } }

04. Pattern-Filled Text

Gradient textPattern

Big letters filled with diagonal stripes from a repeating gradient instead of a smooth blend. Any background, including an image, can be clipped to text this way; keep the letters large and heavy so the fill shows.

View code

<p class="gt4">STRIPE</p>

.gt4 { margin: 0; color: #0f766e; font: 900 60px/1 Impact, "Arial Black", sans-serif; letter-spacing: .02em; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) { .gt4 { background: repeating-linear-gradient(45deg, #0f766e 0 6px, #115e59 6px 12px, #134e4a 12px 18px); -webkit-background-clip: text; background-clip: text; color: transparent; } }

05. Conic Rainbow Text

Gradient textConic

A conic gradient clipped to the text gives a colour-wheel effect, each letter catching different hues around the centre. Conic gradients clip to text exactly like linear ones, and these pastel stops stay readable on dark.

View code

<p class="gt5">Prism</p>

.gt5 { margin: 0; color: #fde68a; font: 900 60px Inter, system-ui, sans-serif; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) { .gt5 { background: conic-gradient(from 0deg, #fca5a5, #fde68a, #86efac, #93c5fd, #c4b5fd, #f9a8d4, #fca5a5); -webkit-background-clip: text; background-clip: text; color: transparent; } }

06. Gradient Text with a Solid Shadow

Gradient textShadow

text-shadow shows through transparent gradient text, so a drop shadow needs another way: a dark copy of the word from attr(data-t) sits behind it, offset by a few pixels. The result is a bold, poster-like headline.

View code

<p class="gt6" data-t="POSTER">POSTER</p>

.gt6 { position: relative; isolation: isolate; margin: 0; color: #f97316; font: 900 56px/1 Inter, system-ui, sans-serif; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .gt6 { background: linear-gradient(180deg, #fbbf24, #f97316 60%, #db2777); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .gt6::before { content: attr(data-t); position: absolute; left: 4px; top: 4px; z-index: -1; color: #1e1b4b; }
}

07. Gradient Revealed on Hover

Gradient textHover

A link whose text is plain dark at rest and fills with a gradient sweeping from the left when hovered or focused, by transitioning the size of a clipped gradient layer over a solid one. The resting state stays calm and readable.

View code

<a class="gt7" href="#case">Read the case study</a>

.gt7 { color: #101828; font: 900 28px Inter, system-ui, sans-serif; text-decoration: none; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) { .gt7 { background: linear-gradient(90deg, #7c3aed, #be185d) 0 0 / 0% 100% no-repeat, linear-gradient(#101828, #101828); -webkit-background-clip: text; background-clip: text; color: transparent; transition: background-size .45s ease; } .gt7:hover, .gt7:focus-visible { background-size: 100% 100%, auto; } }
.gt7:focus-visible { outline: 3px solid #c4b5fd; outline-offset: 4px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { .gt7 { transition: none; } }

About these CSS Gradient Text Designs

The technique

Set a gradient as the background, clip it to the text with background-clip: text (plus the -webkit- version) and make the text colour transparent. Wrap it in @supports with a solid colour fallback.

Contrast at both ends

Every colour in the gradient must contrast with the page. On white, use darker stops; on dark pages, use lighter pastel stops.

Shadows need a copy

text-shadow shows through transparent text and muddies the gradient. For a shadow, place a solid copy of the word behind it with attr().

Emphasise, do not decorate everything

A single gradient word usually lands harder than a whole gradient paragraph, which is also harder to read.

Frequently asked questions

Is gradient text accessible?

Yes. It is still real text; just check the contrast of each colour.

Can I select and copy it?

Yes, selection and copying work normally.

Does it work in every browser?

background-clip: text works in all current browsers with the -webkit- prefix.