Glass Pricing Card

Le code

Un aperçu du code 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>

Cas d'usage concrets

Quelques contextes où Glass Pricing Card fait mouche :

• Une carte de tarif translucide
• Une modale de connexion
• Une barre de navigation en verre

Comment ça marche

Effet 100 % CSS — aucune dépendance JavaScript. Il s'appuie sur animation @keyframes, flou d'arrière-plan (backdrop-filter) et transformations CSS (transform).

À personnaliser

Tu peux régler :

• la vitesse d'animation (actuellement 6s)

Intégrer en 3 étapes

1. Colle le HTML dans ta page, à l'endroit où tu veux l'effet.
2. Ajoute le CSS à ta feuille de style (ou dans une balise <style>).
3. Ajuste les couleurs et variables CSS à ta marque — aucune dépendance à installer.

Compatibilité navigateur

Fonctionne sur tous les navigateurs modernes (Chrome, Firefox, Safari, Edge). Responsive, avec dégradation propre. backdrop-filter demande Safari 9+ / Chrome 76+ (ajoute le préfixe -webkit- pour Safari).

Plus d'effets Glassmorphism

FAQ