pricing cards gradient backdrop hover scale saas pricing gradient backdrop hover scale cards plans pricing cards with gradient backdrop visual pricing section with hover effect
Pricing Image Backdrop
Fetch pattern JSON:
curl https://webspire.de/patterns/pricing/image-backdrop.json image-backdrop.html
<section class="ws-pricing bg-[var(--ws-pricing-bg)] py-16">
<div class="mx-auto max-w-5xl px-6 text-center">
<h2 class="text-3xl font-bold text-[var(--ws-pricing-text)]">Choose Your Plan</h2>
<p class="mt-3 text-lg text-[var(--ws-pricing-text-soft)]">Simple, transparent pricing for every stage.</p>
</div>
<div class="mx-auto mt-12 grid max-w-5xl gap-6 px-6 lg:grid-cols-3">
<!-- Plan 1 -->
<div class="group relative overflow-hidden rounded-2xl border border-[var(--ws-pricing-card-border)]">
<div class="absolute inset-0 bg-[var(--ws-pricing-card-bg)] transition-transform duration-500 group-hover:scale-110"></div>
<div class="relative z-10 p-6">
<h3 class="text-sm font-semibold uppercase tracking-wider text-[var(--ws-pricing-text-muted)]">Starter</h3>
<div class="mt-4 flex items-baseline gap-1">
<span class="text-4xl font-bold text-[var(--ws-pricing-text)]">€0</span>
<span class="text-sm text-[var(--ws-pricing-text-muted)]">/month</span>
</div>
<p class="mt-3 text-sm text-[var(--ws-pricing-text-soft)]">Perfect for side projects and experimentation.</p>
<ul class="mt-6 space-y-3 text-sm">
<li class="flex items-center gap-2 text-[var(--ws-pricing-text-soft)]">
<svg class="h-4 w-4 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
5 patterns included
</li>
<li class="flex items-center gap-2 text-[var(--ws-pricing-text-soft)]">
<svg class="h-4 w-4 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
Community support
</li>
<li class="flex items-center gap-2 text-[var(--ws-pricing-text-muted)]">
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
Custom components
</li>
</ul>
<a href="#" class="mt-6 block rounded-xl border border-[var(--ws-pricing-card-border)] py-2.5 text-center text-sm font-semibold text-[var(--ws-pricing-text-soft)] transition hover:opacity-80">Get Started</a>
</div>
</div>
<!-- Plan 2: Featured -->
<div class="group relative overflow-hidden rounded-2xl border-2 border-blue-500 shadow-lg">
<div class="absolute inset-0 bg-gradient-to-br from-blue-500 to-indigo-600 transition-transform duration-500 group-hover:scale-110"></div>
<div class="relative z-10 p-6">
<div class="flex items-center justify-between">
<h3 class="text-sm font-semibold uppercase tracking-wider text-blue-100">Pro</h3>
<span class="rounded-full bg-white/20 px-2.5 py-0.5 text-xs font-medium text-white">Popular</span>
</div>
<div class="mt-4 flex items-baseline gap-1">
<span class="text-4xl font-bold text-white">€29</span>
<span class="text-sm text-blue-200">/month</span>
</div>
<p class="mt-3 text-sm text-blue-100">Everything you need for production projects.</p>
<ul class="mt-6 space-y-3 text-sm">
<li class="flex items-center gap-2 text-white">
<svg class="h-4 w-4 text-emerald-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
Unlimited patterns
</li>
<li class="flex items-center gap-2 text-white">
<svg class="h-4 w-4 text-emerald-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
Priority support
</li>
<li class="flex items-center gap-2 text-white">
<svg class="h-4 w-4 text-emerald-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
Custom components
</li>
</ul>
<a href="#" class="mt-6 block rounded-xl bg-white py-2.5 text-center text-sm font-semibold text-blue-600 transition hover:bg-blue-50">Get Started</a> <!-- ws-ok: CTA intentionally white on gradient card -->
</div>
</div>
<!-- Plan 3 -->
<div class="group relative overflow-hidden rounded-2xl border border-slate-700">
<div class="absolute inset-0 bg-gradient-to-br from-slate-900 to-slate-800 transition-transform duration-500 group-hover:scale-110"></div>
<div class="relative z-10 p-6">
<h3 class="text-sm font-semibold uppercase tracking-wider text-slate-400">Enterprise</h3>
<div class="mt-4 flex items-baseline gap-1">
<span class="text-4xl font-bold text-white">€99</span>
<span class="text-sm text-slate-400">/month</span>
</div>
<p class="mt-3 text-sm text-slate-400">For teams that need full customization and support.</p>
<ul class="mt-6 space-y-3 text-sm">
<li class="flex items-center gap-2 text-slate-300">
<svg class="h-4 w-4 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
Everything in Pro
</li>
<li class="flex items-center gap-2 text-slate-300">
<svg class="h-4 w-4 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
Dedicated support
</li>
<li class="flex items-center gap-2 text-slate-300">
<svg class="h-4 w-4 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
SLA guarantee
</li>
</ul>
<a href="#" class="mt-6 block rounded-xl border border-slate-600 py-2.5 text-center text-sm font-semibold text-white transition hover:bg-slate-700">Contact Sales</a>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Experimental Draft
pricingcardsgradientbackdrophoverscalesaas
Slots
| Name | Required | Description |
|---|---|---|
| heading | No | Section title and subtitle. |
| cards | Yes | Pricing cards with backdrop, features, and CTA. |