Glass Pricing Card

The code

A glimpse of the source:

<div class="glass-pricing-scene">
    <div class="glass-pricing-glow">
    </div>
    <div class="glass-pricing-card">
      <div class="glass-pricing-badge">Populaire</div>
      <div class="glass-pricing-price">29<span>€/mois</span>
      </div>
      <p class="glass-pricing-period">Facturé annuellement</p>
      <div class="glass-pricing-divider">
      </div>

Concrete use cases

A few real contexts where Glass Pricing Card shines:

• A translucent pricing card
• A login modal
• A glass navigation bar

How it works

Pure CSS effect — no JavaScript dependency. It relies on a @keyframes animation, background blur (backdrop-filter) and CSS transforms.

Make it yours

You can tweak:

• animation speed (currently 6s)

Add it in 3 steps

1. Paste the HTML where you want the effect on your page.
2. Add the CSS to your stylesheet (or in a <style> tag).
3. Tweak the colors and CSS variables to match your brand — nothing to install.

Browser support

Works in every modern browser (Chrome, Firefox, Safari, Edge). Responsive, with graceful degradation. backdrop-filter needs Safari 9+ / Chrome 76+ (add the -webkit- prefix for Safari).

More Glassmorphism effects

FAQ