Gradient Background Hero

प्रीव्यू

कोड

<!--
  Three layers, and all three are load-bearing:
    1. the animated gradient (decorative, aria-hidden),
    2. a flat scrim over it,
    3. the content.
  The scrim is not a mood filter. An animated gradient moves through light and
  dark stops, so white text over the *raw* gradient passes contrast at one frame
  and fails at the next. The scrim is what makes 4.5:1 true at every frame.
-->
<section class="hero-gradient">
  <div class="hero-gradient__bg" aria-hidden="true"></div>
  <div class="hero-gradient__scrim" aria-hidden="true"></div>

  <div class="hero-gradient__content">
    <p class="hero-gradient__kicker">Now in public beta</p>
    <h1 class="hero-gradient__title">Build faster than you can spec it</h1>
    <p class="hero-gradient__copy">
      A single toolkit for the whole team - design, ship and measure without
      leaving the tab.
    </p>
    <a class="hero-gradient__cta" href="#">Start building</a>
  </div>
</section>

प्रॉपर्टीज़

वेरिएंट

कस्टमाइज़ेशन

The scrim is the component. An animated gradient moves through light and dark stops, so white text over the raw gradient passes contrast on one frame and fails on the next - `bg-black/40` is what makes 4.5:1 true at *every* frame, not just the one you screenshotted. For the same reason the sub-copy is a solid `text-gray-200` rather than `text-white/70`: a translucent white over moving colour has a contrast ratio that changes as it pans. The animation pans `background-position` across a `300%` gradient, which the compositor handles; animating the colour stops themselves would repaint every frame. Tailwind cannot declare `@keyframes`, so they travel with the component in a `<style>` tag - nothing to add to a config. Reduced motion stops the pan and keeps the gradient: the motion is the decoration, the gradient is the design.

विवरण

लेखक

ADYSRE

वर्ज़न

1.0.2

बनाया गया

2026-05-21

अपडेट किया गया

2026-07-16

संबंधित कंपोनेंट