Stripe-style SaaS pricing section template with gradient featured center card for B2B and identity software
Stripe-style SaaS pricing section with a visually elevated featured center Growth card showcasing SSO, SCIM, Policy, Roles, Audit, and API access, flanked by Starter and Scale cards. Built for SaaS identity, access management, directory, and B2B software companies. Use this template with Claude Code, Replit, Lovable, ChatGPT Codex, Bolt, Cursor, or another coding tool.
About this vibe coding template
A three-column pricing section for SaaS identity, directory, access management, and developer platform products that want to visually emphasise one recommended tier without a conventional highlighted-border treatment. The center Growth card uses a deep blue radial gradient (blue-hi to blue to blue-deep), an inset white highlight rim, and a 55px blue glow drop shadow to lift it above the flanking cards. Inside, a serif italic headline, a sub-grid of eight square feature tiles with coloured category icons, a 64px serif price, and a white CTA button with the brand deep-blue text create a rich card that functions as both a pricing unit and a feature showcase. The outer Starter and Scale cards are white with clean shadow, a coloured diamond dot tier marker, a serif price, a feature list with check-SVG markers, and a ghost-button CTA. Two blurred aura rectangles (coral-amber at top-left, violet-mint at bottom-right) sit behind the grid at z-index 1, visible through the transparent body background. A faint dot-grid mask-image background adds depth without competing with the cards.
Common questions about this template
How do I change the feature icons and labels inside the center tile grid?
Each tile inside .featured .tiles is a div with a .ic colour block and a .lbl text span. Ask Claude Code or Bolt to update the .lbl text to your feature names and change the background colour on each .ic via its modifier class (a through h). The tile grid uses repeat(4,1fr) — ask your vibe coding tool to change this to repeat(3,1fr) or repeat(2,1fr) if you have fewer features.
How do I update the aura colours to match my own brand palette?
The two .aura divs use linear-gradient backgrounds — coral-amber on the left and violet-mint on the right. Ask Claude Code or Lovable to update the gradient colours on .aura.a1 and .aura.a2 to your brand accent colours. Adjust filter:blur and opacity on the .aura class to control how saturated and visible the glow appears.
Can I swap the featured center card to a different tier?
Yes. Move the .featured class to whichever .card div you want to highlight. The .featured CSS applies the blue gradient, glow shadow, upward transform, and tile grid treatment. Remove .featured from the current Growth card and add it to the Starter or Scale card instead, then update the content inside to match that tier.
Which tools can I use to build with this template?
Use this template with Claude Code, Replit, Lovable, ChatGPT Codex, Bolt, Cursor, or another coding tool.
Use this AI coding template for
- ·Pricing sections for SaaS identity, SSO, SCIM, access management, and developer directory products where the featured tier needs to be unmissable in a three-column layout
- ·Vibe coding projects for B2B SaaS landing pages in Bolt, Claude Code, or Replit that need a featured center card treatment with a gradient panel, tile grid, and coloured aura depth effect
- ·SaaS pricing pages for platform and infrastructure products where three tiers — a small-team plan, a full-featured growth plan, and a large-organisation custom plan — need distinct visual weights
Works with every vibe coding tool
More vibe coding pricing templates
View allLinear-style single-plan pricing card
App-style paywall pricing section
SaaS usage-based pricing section template with gradient slider for API tools and developer platforms
SaaS pricing comparison table template for B2B enterprise software and observability products
Dark gradient fintech pricing section template for neobank, digital banking, and subscription SaaS
AI writing tool SaaS landing page template for content teams and marketing platforms
Other templates you might like