cta gradient banner conversion vibrant cta gradient banner vibrant purple indigo conversion gradient call to action banner vibrant CTA with blur effects
CTA Gradient
Fetch pattern JSON:
curl https://webspire.de/patterns/cta/gradient.json gradient.html
<section class="ws-cta py-20">
<div class="mx-auto max-w-7xl px-6">
<div class="relative overflow-hidden rounded-3xl bg-gradient-to-r from-indigo-600 via-purple-600 to-indigo-600 px-8 py-16 text-center shadow-2xl sm:px-16 sm:py-20" style="--cta-accent: var(--ws-color-primary);">
<!-- Decorative elements -->
<div class="absolute -left-20 -top-20 h-60 w-60 rounded-full bg-white/10 blur-3xl" aria-hidden="true"></div>
<div class="absolute -bottom-20 -right-20 h-60 w-60 rounded-full bg-white/10 blur-3xl" aria-hidden="true"></div>
<div class="relative">
<h2 class="text-balance text-3xl font-bold tracking-tight text-white sm:text-4xl">Ready to transform your workflow?</h2>
<p class="mx-auto mt-4 max-w-xl text-pretty text-lg text-indigo-100">Join thousands of developers shipping beautiful interfaces faster with production-ready patterns.</p>
<div class="mt-8 flex flex-wrap justify-center gap-3">
<a href="#" class="rounded-xl bg-white px-6 py-3 text-sm font-semibold text-indigo-700 shadow-sm transition hover:bg-indigo-50">Get started free</a> <!-- ws-ok -->
<a href="#" class="rounded-xl border border-white/30 bg-white/10 px-6 py-3 text-sm font-semibold text-white backdrop-blur transition hover:bg-white/20">Talk to sales</a>
</div>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
ctagradientbannerconversionvibrant
Slots
| Name | Required | Description |
|---|---|---|
| heading | Yes | Bold action headline. |
| description | No | Supporting text. |
| actions | Yes | Primary (white) and secondary (glass) CTA buttons. |
Vibrant indigo-to-purple gradient CTA inside a rounded container with decorative blur circles. Centered headline, description, and dual buttons (white solid + glass outline). Shadow-2xl for depth. High-impact placement for bottom-of-page conversion.