Layered Glass

Le code

Un aperçu du code source :

<div class="layered-glass-scene">
    <div class="layered-glass-bg">
      <span>
      </span>
      <span>
      </span>
      <span>
      </span>
      <span>
      </span>

Cas d'usage concrets

Quelques contextes où Layered Glass fait mouche :

• Un widget météo ou dashboard
• Une notification flottante
• Une carte de tarif translucide

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 :

• 3 variables CSS pour ajuster couleurs, espacements et arrondis
• la vitesse d'animation (actuellement 7s)

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