pricingAdvancedhover
Glass Pricing
Three pricing tiers as glassmorphism cards on an aurora background.
Claude prompt
Drop this into Claude Code, claude.ai, or your AI tool of choice to regenerate or remix this component from scratch.
Build a glassmorphism pricing section on an animated aurora background: 3 plan cards in a grid (stack on mobile). Background has 3 large blurred radial-gradient blobs (purple, cyan, pink) drifting on different keyframe loops with mix-blend-mode: screen. Each plan card uses backdrop-filter: blur(20px) over a translucent white tint, with a 1px white border. The middle 'featured' card has a slightly more opaque tint, a 'MOST POPULAR' gradient chip in the top-right, and a conic gradient border via the mask-composite trick. Prices use Bebas Neue at 4rem. Feature list uses cyan checkmarks. The featured CTA is a solid white button; others are outlined.
Code
html
<!--
Source: Vibedex
https://vibedex.io
License: MIT
Surfaced via https://vibedex.io/components/vbx-glass-pricing
-->
<section class="hero"><div class="aurora a1"></div><div class="aurora a2"></div><div class="aurora a3"></div><div class="copy"><h2>Pricing for every team.</h2><div class="plans"><article class="plan"><h3>Hobby</h3><div class="price">$0<span>/mo</span></div><ul><li>Unlimited components</li><li>Open source</li><li>Community support</li></ul><a class="btn" href="#">Start free</a></article><article class="plan featured"><span class="tag">MOST POPULAR</span><h3>Studio</h3><div class="price">$29<span>/mo</span></div><ul><li>Everything in Hobby</li><li>Premium components</li><li>Priority support</li><li>Custom themes</li></ul><a class="btn primary" href="#">Choose Studio</a></article><article class="plan"><h3>Team</h3><div class="price">$99<span>/mo</span></div><ul><li>Everything in Studio</li><li>SSO + audit logs</li><li>Dedicated CSM</li><li>Custom contracts</li></ul><a class="btn" href="#">Talk to sales</a></article></div></div></section>