Gradient wave hero with live ticker
Dark gradient hero with three drifting blurred blobs and a small live-updating ticker chip above the headline, the texture Stripe uses to avoid a flat gradient. Swap the ticker for a real metric or delete it, it is decorative only.
Live preview
open in new tab ↗<section class="sw-hero">
<div class="sw-hero-bg">
<span class="sw-blob sw-blob-a"></span>
<span class="sw-blob sw-blob-b"></span>
<span class="sw-blob sw-blob-c"></span>
</div>
<div class="sw-hero-inner">
<p class="sw-ticker">Live activity on the platform: <strong id="swTickerValue">1.71%</strong></p>
<h1 class="sw-headline">Infrastructure to grow your revenue.</h1>
<p class="sw-sub">Accept payments, automate billing and launch new revenue models, built to scale from your first sale to your billionth.</p>
<div class="sw-cta-row">
<button class="sw-btn-primary">Get started</button>
<button class="sw-btn-secondary">Talk to sales</button>
</div>
</div>
</section>Block id: stripe-gradient-wave-herovanilla · swap-content
More hero blocks
Want the whole site, not just the block?
We ship real client sites in 3 weeks — with blocks like this one, wired to your brand.