bento gradient grid colorful features bento gradient grid colorful cards features vibrant colorful bento grid gradient feature cards grid
Bento Gradient
Fetch pattern JSON:
curl https://webspire.de/patterns/bento/gradient.json gradient.html
<section class="ws-bento bg-[var(--ws-bento-bg)] py-20">
<div class="mx-auto max-w-7xl px-6">
<div class="mx-auto max-w-2xl text-center">
<h2 class="text-3xl font-bold tracking-tight text-[var(--ws-bento-text)] sm:text-4xl">Powerful features</h2>
<p class="mt-4 text-lg text-[var(--ws-bento-text-soft)]">Everything you need to build, ship, and scale.</p>
</div>
<div class="mt-16 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
<!-- Hero card: spans 2 columns (decorative gradient — keep hardcoded) -->
<div class="rounded-2xl bg-gradient-to-br from-indigo-600 to-purple-600 p-8 sm:col-span-2">
<svg class="h-8 w-8 text-white/80" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" /></svg>
<h3 class="mt-4 text-xl font-bold text-white">Blazing fast builds</h3>
<p class="mt-2 text-base text-indigo-100">Incremental compilation and smart caching deliver sub-second build times, even on large codebases. Deploy with confidence.</p>
</div>
<!-- Blue card (decorative gradient — keep hardcoded) -->
<div class="rounded-2xl bg-gradient-to-br from-blue-500 to-cyan-500 p-8">
<svg class="h-8 w-8 text-white/80" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418" /></svg>
<h3 class="mt-4 text-lg font-bold text-white">Global CDN</h3>
<p class="mt-2 text-sm text-blue-100">Edge-deployed worldwide for minimal latency.</p>
</div>
<!-- Emerald card (decorative gradient — keep hardcoded) -->
<div class="rounded-2xl bg-gradient-to-br from-emerald-500 to-teal-500 p-8">
<svg class="h-8 w-8 text-white/80" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z" /></svg>
<h3 class="mt-4 text-lg font-bold text-white">Enterprise security</h3>
<p class="mt-2 text-sm text-emerald-100">SOC 2 Type II, SSO, and audit logging built in.</p>
</div>
<!-- Amber card (decorative gradient — keep hardcoded) -->
<div class="rounded-2xl bg-gradient-to-br from-amber-500 to-orange-500 p-8">
<svg class="h-8 w-8 text-white/80" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z" /></svg>
<h3 class="mt-4 text-lg font-bold text-white">Real-time analytics</h3>
<p class="mt-2 text-sm text-amber-100">Live dashboards with custom metrics and alerts.</p>
</div>
<!-- Rose card: spans full width (decorative gradient — keep hardcoded) -->
<div class="rounded-2xl bg-gradient-to-r from-rose-500 to-pink-500 p-8 sm:col-span-2 lg:col-span-3">
<div class="flex items-start gap-6">
<svg class="h-8 w-8 flex-shrink-0 text-white/80" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z" /></svg>
<div>
<h3 class="text-lg font-bold text-white">Unlimited collaboration</h3>
<p class="mt-1 text-sm text-rose-100">Invite your entire team at no extra cost. Real-time editing, comments, and presence indicators keep everyone in sync.</p>
</div>
</div>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
bentogradientgridcolorfulfeatures
Slots
| Name | Required | Description |
|---|---|---|
| heading | Yes | Section title and description. |
| grid | Yes | Bento grid of gradient-filled cards with icons and text. |
Vibrant bento grid with gradient-filled cards. One hero card spans 2 columns with a purple-to-indigo gradient. Remaining cards use blue, emerald, and amber gradients. Each card has a white icon, title, and description. High visual impact for marketing pages.