Guides · · Maxwell Prehoda
Gradient Text CSS: 12 Real Examples, Read Straight From Stripe, Apple and Vercel's Stylesheets
Gradient text in CSS is three declarations: a gradient as the background, background-clip: text (plus the -webkit- prefixed version), and a transparent text fill so the background shows through the letters. That has worked across browsers since 2015. The craft is in which gradient, where you use it, and what happens when it fails.
To show the craft, we read the production stylesheets of Stripe, Apple, Vercel, Linear, Raycast, Supabase, Resend and Notion on November 1, 2026, and quote the real rules below. Sites change, so treat the exact values as a snapshot; the patterns are what to copy. Each entry says what the technique is best for, and our pure CSS versions play live where they fit.
1. The base technique (MDN background-clip: text): Best for getting gradient text right the first time
Platform: Native CSS, Baseline widely available
MDN lists background-clip: text as Baseline widely available, across browsers since July 2015. The pattern every site below uses is: background: linear-gradient(...), -webkit-background-clip: text; background-clip: text;, and either color: transparent or -webkit-text-fill-color: transparent.
MDN's accessibility notes are the part most tutorials skip: check contrast across the whole gradient, add a fallback background-color in case the image fails, and wrap the effect in @supports (background-clip: text) or (-webkit-background-clip: text) so unsupported browsers get solid, readable text.
Our Animated Gradient Text below is the base technique with the gradient flowing; its second and third colors are mixed from one accent variable, and the entry includes a Tailwind version.
Watch out for: Using -webkit-text-fill-color: transparent instead of color: transparent keeps color as a real value, so underlines, borders and currentColor icons inside the heading stay visible.
2. Stripe's gradient stats: Best for big numbers that need to pop in a stats section
Platform: stripe.com production CSS
Stripe saves gradient text for figures. One stat class in the stylesheets stripe.com loads sets font-size: 110px with linear-gradient(203deg, #ffa319 9.93%, #fd6252 82.88%, #fd5b86 131.32%), a warm orange to pink, clipped to the text. Note the last stop is past 100%: the ramp is stretched beyond the box, so the number only shows part of it and never reaches the pinkest end.
Another set of stat headings layers a semi-transparent gradient over a solid color in the same background shorthand, for example rgba purples over #e3ecf7. The solid layer means the text still has a color under the gradient if anything goes wrong.
Stripe's design system also has a generic .hds-stat--gradient variant, which tells you this is a reusable component, not a one-off.
Watch out for: Very large gradient numbers are decoration. Make sure the same figure is readable as plain text for screen readers and in the page's text content, not only as a styled span.
3. Vercel's quiet grey gradient: Best for premium headings that should not look colorful
Platform: vercel.com production CSS
Vercel's gradientText class is barely a gradient at all: linear-gradient(#555 0%, #000 110%) top to bottom in light theme, and linear-gradient(#fff 0%, #adadad 110%) in dark theme. It gives heavy headings a subtle sheen without adding a color, and the 110% stop means the darkest point is just off the bottom edge.
The same stylesheet has a thinking-loader class for its AI features: a grey gradient with a lighter band (#666 33%, #ccc 50%, #666 66%), background-size: 300% 100%, and a keyframe that moves background-position from 100% to 0%. That is the shimmering "Thinking" text pattern in about six declarations.
Our Thinking Shimmer Label below is a pure CSS version of that sweep, with a small sparkle beside the label.
Watch out for: Theme-aware gradients need two definitions. Vercel ships a separate .dark-theme rule; if you only define one, dark mode gets a dark gradient on a dark background.
4. Apple's MacBook Pro shine: Best for a product launch headline with a moving highlight
Platform: apple.com production CSS + JavaScript
On Apple's homepage in November 2026, the MacBook Pro tile uses two gradient-text tricks. The subhead is a rainbow, linear-gradient(to right, #fdd30f, #f4f6f7, #90ceee, #48a7f4, #2789ff), under two more gradient layers sized at 300%, and moving a --subhead-gradient-x custom property slides those top layers to reveal the colors.
The headline gets a shine: a copy of the text with a white band (linear-gradient(105deg, transparent 36%, #fff 46% 54%, transparent 64%)) clipped to the letters, positioned by a --headline-shine-x property, then given drop-shadow glows and mix-blend-mode: plus-lighter so it brightens the text beneath it. The shine sits behind an html.enhanced class, so plain text shows if the enhancement does not load.
Our Shine Text Hover Effect below is a pure CSS glint that passes through the letters once on hover.
Watch out for: Apple drives the motion with custom properties set from script. A pure CSS version needs @property to animate the position smoothly, or a background-position keyframe.
5. Linear's multi-line fix: Best for gradient headings that wrap onto two lines
Platform: linear.app production CSS
Linear's gradientText class has one declaration most copies miss: box-decoration-break: clone (with its -webkit- twin). Without it, an inline element that wraps paints one gradient across the whole run of text, so the second line starts in the middle of the colors. With clone, each line fragment gets the full gradient.
The rest is the standard trio, using -webkit-text-fill-color: transparent paired with color: unset rather than color: transparent.
If your hero headline wraps on mobile, this is the single line to add.
Watch out for: Clone also repeats padding and border-radius on every line. If the heading has a background pill, check how the wrapped version looks.
6. Raycast's tinted headlines and shimmer: Best for dark-themed product pages
Platform: raycast.com production CSS
Raycast's page headers fade white into a tint, for example linear-gradient(94.34deg, #fff -0.89%, #9bd0f5 100%) for a white to soft blue, and linear-gradient(270.06deg, #d3c4ff 0.04%, #fff 52.59% 99.94%) for lavender to white. On a dark background that reads as lit text rather than a rainbow.
Its loading label uses modern CSS for the shimmer: the base color is rgb(from currentColor r g b / 33%), relative color syntax that dims whatever the text color is, and a 200% wide white band sweeps across with a 1.5 s linear keyframe that pauses for the last 20% of each cycle.
That pause is a nice detail: the sweep reads as a pulse of activity instead of a constant scroll.
Watch out for: Relative color syntax is newer than the rest of the technique. Declare a plain fallback color first so older browsers still show the label.
7. Supabase and Resend's fading headings: Best for headings that fade toward the background
Platform: supabase.com and resend.com production CSS
Supabase's heading-gradient goes from the foreground color at the top to color-mix(in oklab, var(--foreground) 70%, transparent) at the bottom, so the text fades slightly into the page in either theme without hard-coding a color. It upgrades the gradient to interpolate in oklab only inside @supports (background-image: linear-gradient(in lab, red, red)), a clean example of progressive enhancement.
Resend does the same by hand: effect-font-gradient is linear-gradient(to bottom right, #fff 30%, #ffffff80), solid white fading to half-transparent white across the diagonal.
Both sites also ship gradient text through Tailwind utilities, which is how most teams scale this to many headings.
Watch out for: Fading to transparent lowers contrast at the end of the heading. Keep the faded stop at 70% opacity or more, as Supabase does, and test the last word.
8. Notion's currentColor shimmer: Best for loading text that matches any theme automatically
Platform: notion.com production CSS
Notion builds its shimmer entirely from currentColor: linear-gradient(to right, color-mix(in srgb, currentColor 50%, transparent) 0%, currentColor 50%, color-mix(in srgb, currentColor 50%, transparent) 100%) at 200% width, clipped to the text and swept by a 1.5 s linear keyframe.
Because every stop comes from the text's own color, the same class works in light mode, dark mode and inside colored callouts with no extra rules.
It also ships the guard every animated gradient should have: under @media (prefers-reduced-motion: reduce) the animation is set to none. Our Gradient Loading Text below is a looping take on loading text, with a gradient that pours in and drains out.
Watch out for: Shimmering text says "still working". Remove the class the moment the content is ready, or it reads as a stuck state.
9. Tailwind's bg-clip-text utilities: Best for gradient text in a Tailwind project
Platform: Tailwind CSS v4
Tailwind's docs give the whole effect as classes: bg-linear-to-r from-pink-500 to-violet-500 bg-clip-text text-transparent. In v4 the gradient utilities are named bg-linear-to-*, which replaces the older bg-gradient-to-* names you will see in v3 tutorials.
Supabase's production CSS shows the scaled-up version: a set of gradient-text-* classes built on Tailwind's --tw-gradient-from and --tw-gradient-to variables, so the brand gradients live in one place.
Our Tailwind animation guide covers turning a static gradient into an animated one with an @theme keyframe.
Watch out for: text-transparent sets color to transparent, which also hides text-decoration and makes currentColor transparent for any SVG icons inside. Wrap icons outside the gradient span.
10. Our Conic Gradient Text: Best for an animated gradient headline with no JavaScript
Platform: Motions directory, free, HTML + CSS Ours
A conic gradient turns inside the letters, so the colors sweep around the word like a slow radar. The angle is a registered @property, which is what lets the browser interpolate it; plain custom properties jump instead of animating. MDN lists @property as Baseline 2024.
It comes with a prefers-reduced-motion guard and colour and size custom properties. The gradient text collection has dozens more, from Aurora to Iridescent.
Watch out for: Moving gradients pull the eye constantly. Use them on one word or one hero line, not on body copy or every heading.
11. Our Mesh Gradient Text: Best for soft, organic color for creative brands
Platform: Motions directory, free, HTML + CSS Ours
Four soft color blobs wander inside the letters and blend like a mesh gradient. Each blob is a radial-gradient layer, and one keyframe moves them all, so it is still one element clipped to the text.
Mesh-style color reads less like a 2015 rainbow headline and more like the soft gradients in current brand work. If you want it behind the text instead, see our Mesh Gradient Background.
Watch out for: Several large radial layers repaint on every frame. Keep it to display sizes and check it on a low-end phone.
12. Our Holographic Foil Text: Best for launch pages, collectibles and premium tiers
Platform: Motions directory, free, HTML + CSS Ours
Rainbow foil bands and a white glare slide across the letters at different speeds, like tilting a holographic sticker. It is the same layering idea as Apple's shine, two gradient layers moving at different rates, done entirely in CSS.
It suits a "Pro" label, a limited edition or a launch headline. Want a different finish? Describe it to the creator, gold leaf, chrome, oil slick, and get the CSS back.
Watch out for: Foil effects lose contrast where the glare passes. Check the lightest frame against your background, not just a screenshot of a nice moment.
How to choose a gradient text style
The sites above agree on more than they differ.
Match the gradient to the job
Stats and figures: a warm, saturated gradient like Stripe's. Premium headings: a near-monochrome sheen like Vercel's or a white-to-tint like Raycast's. Theme-proof headings: fade from the text color using color-mix, like Supabase and Notion. Launch moments: a moving shine, like Apple's MacBook Pro tile. Loading states: a sweeping band, like Vercel's thinking loader.
Match the code to your stack
Plain CSS: the three-declaration pattern from MDN inside an @supports block. Tailwind: bg-linear-to-* with bg-clip-text and text-transparent. Animated: background-position keyframes for sweeps, @property for angles and colors. Add box-decoration-break: clone to anything that can wrap.
Match it to everyone who reads it
Check contrast at the lightest point of the gradient, not the average. Keep a solid fallback color. Stop the animation under prefers-reduced-motion, as Notion does. And keep it to one or two elements per page, which is what every site in this list does.
Ship one gradient headline today
Start with the three declarations, add the fallback and @supports, and put it on one element: your hero line or your biggest number. That is most of what the best sites do.
For animated versions, copy one from the gradient text collection, or describe the exact finish you want and get production CSS back.
Make a gradient hero headline in pure CSS for a dark landing page. White fading to a soft brand blue left to right, interpolated in oklch, with box-decoration-break: clone so wrapped lines each get the full gradient. Once on load, a narrow white shine sweeps across the letters in 1.2 s with ease-in-out, using background-position. Include a solid fallback color inside an @supports block, and skip the shine under prefers-reduced-motion.
Common questions
How do you make gradient text in CSS?
Set a gradient as the element's background, add background-clip: text and -webkit-background-clip: text, and make the fill transparent with color: transparent or -webkit-text-fill-color: transparent. Wrap it in @supports and keep a solid fallback color.
Does gradient text work in all browsers?
Yes. MDN lists background-clip: text as Baseline widely available since July 2015. Most of the production rules quoted here still include -webkit-background-clip: text alongside the unprefixed property, and it costs nothing to do the same.
How do you animate gradient text?
Make the background wider than the text (200% or 300%) and animate background-position, as Vercel, Raycast, Supabase and Notion do for shimmers. To animate a gradient's angle or colors, register them with @property so the browser can interpolate them.
Why does my gradient text look wrong on two lines?
On a wrapped inline element the gradient spans the whole text run, so each line shows only part of it. Add box-decoration-break: clone and -webkit-box-decoration-break: clone, as Linear does, so every line gets the full gradient.
Is gradient text accessible?
It can be. Check contrast at the lightest part of the gradient, keep a fallback color in case the background fails, keep the real text in the DOM (not an image), and stop any animation under prefers-reduced-motion.
Sources
- MDN: background-clip
- MDN: @property
- MDN: color interpolation method
- Tailwind CSS: background-clip
- Stripe homepage (stylesheets read November 1, 2026)
- Apple homepage (stylesheets read November 1, 2026)
- Vercel homepage (stylesheets read November 1, 2026)
- Linear homepage (stylesheets read November 1, 2026)
- Raycast homepage (stylesheets read November 1, 2026)
- Supabase homepage (stylesheets read November 1, 2026)
- Notion homepage (stylesheets read November 1, 2026)