Text that looks like it is filled with gradients, textures, or photos grabs attention without extra markup or images. The background-clip property can clip a background to the shape of the text itself, which turns any background, linear gradients, repeating patterns, even animated layers, into a crisp text effect. By the end of this article you will build a reusable gradient headline, a striped tagline, and a pattern‑filled wordmark, all using background-clip with clean, accessible HTML.
Why background-clip for text effects matters
Developers often reach for SVG masks or image editors to create gradient or textured text. That path adds assets, complicates theming, and makes typography changes harder. background-clip:text keeps your content as selectable, live text and lets you power the fill entirely with CSS. You can animate the background, switch themes with a single variable, and keep your DOM free of wrappers. Modern engines handle background painting well, so you get strong visuals with minimal overhead and full typographic control.
Prerequisites
You only need a small set of CSS skills to follow along. We will keep the HTML simple and do the heavy lifting in styles.
- Basic HTML
- CSS custom properties
- CSS pseudo-elements (::before / ::after)
Step 1: The HTML Structure
The markup is a single container with three text elements and a link styled like a pill. Each element will demonstrate a different text fill: a hero headline with a gradient, a tagline with stripes, and a wordmark filled by a pattern. The button shows how you can apply the same approach to interactive text and add a small arrow indicator.
<!-- HTML -->
<main class="demo">
<h1 class="text-gradient">CSS Clipped Text</h1>
<p class="text-stripes">Readable, selectable, and fully themeable</p>
<h2 class="text-image">Pattern Fill</h2>
<a class="btn-link" href="#">Explore styles</a>
<div class="badge">PRO</div>
</main>
Step 2: The Basic CSS & Styling
Start with a small design system using CSS variables for colors and spacing. The .demo container centers the content and sets a dark background to showcase lighter text fills. We also define a utility class, .text-clip, that applies the cross‑browser background‑clip/text pattern behind a @supports check, so older browsers simply see a solid color.
/* CSS */
:root {
--bg: #0e0f13;
--panel: #161823;
--text: #cdd6f4;
--muted: #9aa3b2;
--accent-1: #6ee7f9;
--accent-2: #a78bfa;
--accent-3: #f472b6;
--accent-4: #22d3ee;
--radius: 12px;
--pad: 2rem;
}
*,
*::before,
*::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
margin: 0;
font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, Noto Sans, "Apple Color Emoji", "Segoe UI Emoji";
background: linear-gradient(180deg, var(--bg), #0a0b10 60%);
color: var(--text);
line-height: 1.4;
}
.demo {
max-width: 70ch;
margin: 0 auto;
padding: clamp(2rem, 6vw, 6rem) var(--pad);
display: grid;
gap: 1.25rem;
background: linear-gradient(180deg, var(--panel), rgba(22,24,35,0.6));
border-radius: var(--radius);
border: 1px solid rgba(255,255,255,0.06);
}
h1, h2, p { margin: 0; }
h1 {
font-size: clamp(2.25rem, 5vw, 4rem);
font-weight: 800;
letter-spacing: -0.02em;
}
h2 {
font-size: clamp(1.5rem, 3vw, 2rem);
font-weight: 700;
letter-spacing: -0.01em;
}
p {
font-size: 1.05rem;
color: var(--muted);
}
/* Cross-browser text clipping helper */
.text-clip {
/* Fallback: readable solid color before the @supports block applies the clip */
color: var(--text);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
.text-clip {
background-clip: text;
-webkit-background-clip: text;
color: transparent; /* standards engines */
-webkit-text-fill-color: transparent; /* WebKit explicit fill */
}
}
/* Button and badge base styles */
.btn-link {
display: inline-flex;
align-items: center;
gap: .5rem;
width: fit-content;
padding: .65rem 1rem .65rem .9rem;
font-weight: 700;
border-radius: 9999px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.08);
text-decoration: none;
color: var(--text);
position: relative;
transition: background .2s ease, border-color .2s ease;
}
.btn-link:hover {
background: rgba(255,255,255,0.12);
border-color: rgba(255,255,255,0.16);
}
.badge {
justify-self: start;
display: grid;
place-items: center;
width: 3rem;
height: 3rem;
border-radius: 50%;
font-weight: 900;
letter-spacing: 0.08em;
background: radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,0.16), rgba(255,255,255,0.04));
border: 1px solid rgba(255,255,255,0.08);
color: var(--text); /* will be clipped later */
}
Advanced Tip: CSS variables let you swap themes or build light/dark variants without touching component code. Drive all gradient stops from variables so design tokens flow into your text fills.
Step 3: Building the Gradient Headline
Now give the headline a vivid multi‑stop gradient. Apply the .text-clip helper, set a large gradient, and tilt it slightly for depth.
/* CSS */
.text-gradient {
/* First, opt into clipping */
composes: text-clip; /* If your build tool does not support composes, also add .text-clip to the class list in HTML */
/* Visual fill */
background-image:
linear-gradient(100deg,
var(--accent-1) 0%,
var(--accent-2) 35%,
var(--accent-3) 65%,
var(--accent-4) 100%);
background-size: 120% 120%;
background-position: 20% 50%;
text-shadow: 0 1px 0 rgba(0,0,0,0.15); /* tiny depth on dark backgrounds */
}
/* If composes is not available, define a utility you can add in markup */
.text-gradient.text-clip { /* empty on purpose to show the combo */ }
How This Works (Code Breakdown)
The .text-clip utility enables actual clipping. The pair background-clip:text and -webkit-background-clip:text confines the painted background to the glyph shapes. color: transparent and -webkit-text-fill-color: transparent remove any native fill so the gradient becomes the only visible ink.
The gradient uses four stops drawn from variables. By making the background larger than the element (background-size: 120% 120%) and offsetting it a bit (background-position: 20% 50%), the blend lines are not locked to exact letter edges, which produces a smoother result at different font sizes. The subtle text-shadow brings back a hairline of contrast against the dark panel without changing the gradient itself.
You can reuse this approach anywhere you compose text over decorative shapes. For example, placing gradient text inside a circular badge pairs well with the pattern you would use to make a circle with CSS. We will clip the badge text in Step 4 to show how the same technique drops into shaped UI.
Step 4: Building the Pattern and Striped Text
Next, add two variants: a repeating stripe for the tagline and a geometric pattern fill for the subhead. Both reuse .text-clip and only swap backgrounds. We will also give the button a small arrow using a triangle so it reads like a forward action.
/* CSS */
/* Tagline: diagonal candy stripes */
.text-stripes {
composes: text-clip;
font-weight: 600;
letter-spacing: 0.01em;
background-image:
repeating-linear-gradient(
135deg,
#ffffff 0 6px,
#c7d2fe 6px 12px,
#a5b4fc 12px 18px,
#c7d2fe 18px 24px
);
background-size: 200% 200%;
background-position: 0% 50%;
}
/* Subhead: conic pattern that resembles terrazzo */
.text-image {
composes: text-clip;
background-image:
repeating-conic-gradient(
from 45deg,
#fef3c7 0 10deg,
#fde68a 10deg 20deg,
#fbcfe8 20deg 30deg,
#a7f3d0 30deg 40deg,
#bae6fd 40deg 50deg
);
background-size: 150% 150%;
background-position: 50% 50%;
}
/* Button text uses a gradient too */
.btn-link {
/* preserve prior styles, add a text clip fill */
background-image: radial-gradient(120% 200% at 0% 0%, rgba(255,255,255,0.10), rgba(255,255,255,0.02)),
linear-gradient(90deg, var(--accent-2), var(--accent-4));
/* Keep the surface background for the pill, so create a text layer via a nested text gradient */
-webkit-background-clip: padding-box, text;
background-clip: padding-box, text;
-webkit-text-fill-color: transparent;
color: transparent;
}
/* Arrow indicator built with a right-pointing triangle */
.btn-link::after {
content: "";
width: 0;
height: 0;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 8px solid currentColor; /* inherits clipped text color when supported */
opacity: .9;
transform: translateY(1px);
}
/* Badge text: clip a tight vertical gradient */
.badge {
font-size: .95rem;
}
.badge {
background-image: radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,0.16), rgba(255,255,255,0.04));
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
.badge {
background-image: radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,0.16), rgba(255,255,255,0.04));
color: transparent;
-webkit-text-fill-color: transparent;
background-clip: text, border-box;
-webkit-background-clip: text, border-box;
/* overlay a vertical accent just for the glyphs */
background-image:
linear-gradient(180deg, #fff, #d1d5db 70%, #9ca3af),
radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,0.16), rgba(255,255,255,0.04));
background-size: 100% 100%, cover;
background-repeat: no-repeat;
background-position: center;
}
}
How This Works (Code Breakdown)
The .text-stripes element uses repeating-linear-gradient to stack alternating color bands. Because the gradient is the background of the element, not the document, it scales with the element and keys into the letterforms once clipped. A diagonal angle of 135deg usually reads well across both tall and short glyphs. The larger background-size with an offset leaves room for animation in the next section.
The .text-image element relies on repeating-conic-gradient to fake a terrazzo-style pattern. This gives you a decorative look without external images. Conic gradients are perfect for radial motifs and feel organic when you vary segment sizes. Again, clipping converts that pattern into a text fill with crisp edges.
The button demonstrates layered background clipping. The first background is a subtle radial highlight baked into the pill surface. The second layer is the gradient we want to apply to the glyphs only. By supplying two background-clip values (padding-box, text) and matching the vendor property for Safari, each background paints to a different region. The glyph fill gets -webkit-text-fill-color: transparent to reveal the gradient. For the arrow, a tiny right‑pointing triangle made from CSS borders keeps the markup clean. If you want a refresher on the approach, this guide shows how to make a triangle right with CSS.
The circular badge uses a double background in a @supports block. The second background provides a subtle panel highlight, while the first background is a vertical metallic gradient clipped to the text. If you want to construct the badge shape itself from first principles, a quick review of how to make a circle with CSS is handy. You can also drop gradient text on top of ribbons and banners; a guide like make a ribbon banner with CSS pairs well with this technique for hero headers.
Advanced Techniques: Adding Animations & Hover Effects
Animating the background position gives life to clipped text. The shifts are subtle by design so the words remain readable. Pair keyframes with prefers-reduced-motion so you play nice with users who turn off motion.
/* CSS */
/* Slow gradient drift on the headline */
@keyframes gradient-shift {
0% { background-position: 20% 50%; }
50% { background-position: 80% 50%; }
100% { background-position: 20% 50%; }
}
.text-gradient {
animation: gradient-shift 10s ease-in-out infinite;
}
/* Candy stripes slide gently */
@keyframes stripes-slide {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
.text-stripes {
animation: stripes-slide 6s linear infinite;
}
/* Shimmer the button text on hover */
@keyframes shine {
0% { background-position: -50% 50%; }
100% { background-position: 150% 50%; }
}
.btn-link {
background-image:
radial-gradient(120% 200% at 0% 0%, rgba(255,255,255,0.10), rgba(255,255,255,0.02)),
linear-gradient(90deg, rgba(255,255,255,0.2), rgba(255,255,255,0.9), rgba(255,255,255,0.2));
background-size: auto, 200% 100%;
background-position: center, -50% 50%;
}
.btn-link:hover {
animation: none;
/* Animate only the text gradient layer */
background-image:
radial-gradient(120% 200% at 0% 0%, rgba(255,255,255,0.10), rgba(255,255,255,0.02)),
linear-gradient(90deg, rgba(255,255,255,0.2), rgba(255,255,255,0.9), rgba(255,255,255,0.2));
animation: shine 1.2s ease forwards;
}
/* Respect motion preferences */
@media (prefers-reduced-motion: reduce) {
.text-gradient,
.text-stripes,
.btn-link {
animation: none !important;
}
}
Accessibility & Performance
Clipped backgrounds keep content as real text, which helps with selection, translation, and zoom. The main risk is contrast, because gradients can dip below your contrast targets on some letters. Use your variable palette to keep midpoints bright enough, or add a subtle text-stroke or shadow on dark themes to preserve legibility.
Accessibility
Make sure the text communicates meaning on its own, without relying on the gradient to suggest state. If the effect is decorative, no ARIA attributes are needed. If you attach the effect to an interactive element, keep the inline label present for screen readers and use the same words visually. For motion, the @media (prefers-reduced-motion: reduce) block above disables animations to respect user setting. For links and buttons, include a hover or focus style that does not rely only on color change; the .btn-link uses a surface highlight as a secondary cue.
Performance
background-clip:text is a paint‑time effect that limits the background to glyph outlines. Static gradients are cheap. Animated background-position is also light, because it does not trigger layout or geometry changes. Be careful with massive background-size values or multiple overlapping filters, which can increase paint cost. Keep layers to a handful and prefer simple keyframes. If you need many instances on a page, reduce animation durations or play them only on hover to avoid constant work on idle elements.
Ship bolder words with pure CSS
You built three reusable text fills powered by background-clip: a gradient hero, a striped tagline, and a pattern wordmark. The approach scales from badges to banners and works well with your shape toolkit. Now you have a set of techniques you can adapt to menus, headings, and UI labels without image editors or extra markup.