Gradient Text Spotlight

How this works

This gradient text hero animates a marigold → ruby → grape gradient sweep across the emphasis words creative people. The trick is on .hs-20__shine: a linear-gradient background: linear-gradient(90deg, #f5b148, #d63a5e, #7e2d8a, #f5b148) with background-size: 200% 100%, then -webkit-background-clip: text and color: transparent to mask the gradient to the letter shapes. The hs-20-sweep keyframe animates background-position from 0 to 200% over 4 seconds, linear, infinite — a continuous shimmer without any easing bounce. The gradient repeats its start color at the end (marigold appears at both 0% and 100%) so the loop point is seamless.

The section itself is display: grid; place-items: center with min-height: 100vh — the same responsive hero-section pattern used across the family — and paints a plum background (#1a0d20) with a subtle burgundy radial-gradient wash (rgba(120,30,90,0.18)) pinned to the top center. Type is Inter at font-weight: 800, letter-spacing: -0.025em, line-height: 1.05 — the SaaS-modern headline setting. The eyebrow chip uses marigold #f5b148 text inside a translucent border for the launch-teaser register.

Why it converts: gradient text signals 'cutting edge' — this is the 2023-2026 visual language of AI tools, ML platforms, and creative SaaS (Linear, Vercel, Runway, Midjourney all ship variations of this treatment). Visitors read the gradient sweep as a trust marker for AI-adjacent products the same way skeuomorphic gradients signaled 'app' in 2010. The gradient CTA below the headline (marigold → ruby) mirrors the shine treatment so the eye connects headline emphasis to conversion path in one glance.

Make it yours

• Recolor the gradient: marigold #f5b148, ruby #d63a5e, grape #7e2d8a is the warm-to-cool sweep. For AI/ML try #00d4ff → #7e5cff → #ff3d9a. Keep 3-4 stops with the first color repeated at the end — 2-stop gradients look flat, 5+ stops look like a rainbow logo from 2007.
• Swap Inter for the headline: 'Space Grotesk' for tech-forward, 'General Sans' for SaaS-modern, 'Instrument Serif' for editorial gradient hero (rare but stunning). The background-clip: text works on any font, but decorative/script fonts break the sweep visually because the letter shapes are too thin.
• Change the CTA shape: the pill (border-radius: 999px) with matching marigold → ruby gradient is the AI-SaaS default. For flat/brutalist swap to border-radius: 0 and drop the box-shadow. The 0 12px 30px rgba(214,58,94,0.35) shadow color must match the CTA gradient end-color or the button looks unmoored.
• For light mode: invert to #faf6ee cream background, dark plum #2a1830 body text, keep the marigold → ruby → grape gradient on .hs-20__shine (the gradient shows against cream, though contrast per WCAG 1.4.11 needs verification). The radial-gradient wash drops opacity to 0.06.
• For Tailwind: bg-gradient-to-r from-[#f5b148] via-[#d63a5e] to-[#7e2d8a] bg-clip-text text-transparent on the shine span, plus a custom keyframe in tailwind.config for the sweep animation. In Next.js, wrap .hs-20__shine as a <GradientText> component so you can reuse it across headline, CTA, and section labels.

Gotchas — read before shipping

• The -webkit-background-clip: text prefix is still required for full Chromium coverage — the unprefixed background-clip: text ships in all evergreen browsers but omitting the prefix breaks Chrome 100 and earlier (~1% of your traffic). Ship both properties as the demo does; do NOT trust autoprefixer to add it because most configs no longer target that far back.
• Animating background-position on a text-clipped gradient is one of the few animations that runs on the paint thread, NOT the compositor. It cannot be promoted with will-change: transform because the property is not transform. INP is safe (~50ms) but on very long headlines (30+ characters) the paint cost per frame can push mid-tier Android to 200ms+ — keep the shine span to 2-3 words max.
• Contrast: the gradient text averages roughly 6:1 against #1a0d20 at the marigold end, ~4.5:1 at the ruby end, and ~3:1 at the grape end. The grape stop FAILS WCAG AA for text under 24px. Because the gradient is animated the exact contrast at any moment varies — you cannot pass an audit tool. Either keep the shine text at 38px+ (the demo does) or narrow the gradient stops to omit the grape.
• The prefers-reduced-motion guard sets animation: none; background-position: 0 0 — this stops the sweep but preserves the gradient as a static fill, which is the correct WCAG 2.3.3 behavior. Do NOT fall back to a solid color; the gradient is the whole product signal, and users with vestibular sensitivity get a stationary version of the same brand cue.
• Framework quirk: background-clip: text with color: transparent is captured correctly by Playwright and Puppeteer screenshots, but Safari's PDF renderer sometimes rasterizes it as solid black. If your users export the page to PDF (rare but real for AI-tool marketing pages), test the export — you may need to add a @media print fallback that sets a solid color.
• The CTA uses transition: transform 0.15s with a translateY(-1px) hover — compositor-thread only, INP-safe. But the box-shadow: 0 12px 30px does NOT transition, so the shadow stays put while the button lifts. This is intentional (a moving shadow reads as gimmicky) — do not 'fix' it by adding shadow to the transition list.

Techniques used in this demo