Gradient text

그라데이션 텍스트

Filling a gradient only inside glyph shapes with background-clip: text — a common trick for headings and logos.

Also known as: Text gradientbackground-clip: text

···

html

<h1 class="grad">Gradient</h1>

css

h1.grad{margin:0;font-size:clamp(36px,9vmin,64px);font-weight:800;letter-spacing:-.02em;
  background:linear-gradient(90deg,#5b5bf7,#ff5c8a,#ffb648,#18c29c,#5b5bf7);background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:flow 6s linear infinite}
@keyframes flow{to{background-position:300% 0}}

Set a gradient as the background, then color: transparent plus background-clip: text so the gradient is visible only through the glyph outlines. The -webkit- prefix is still needed in some browsers.

Enlarging background-size and animating background-position makes the gradient appear to flow — a shine effect layered on top of the fill.

When to use

Use for brand wordmarks and hero headlines. Avoid it in body copy, and don’t let text meaning depend on colour alone for colour-blind users.