Frosted
Glassmorphism réaliste en pur CSS : backdrop-filter, bord lumineux et grain SVG fractal superposé — aucune ligne de JavaScript.
Vous aurez accès à la démo interactive avec un compte gratuit.
Cet effet fait partie d'Effect.Labs — 811 effets vanilla, une partie gratuite, une partie premium. Backgrounds comprend 50 effets, dont 6 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Le verre givré naît de la combinaison de deux propriétés CSS sur .ng-frosted-glass : backdrop-filter: blur(16px) floute tout ce qui est peint derrière l'élément dans l'ordre de composition, tandis que background: rgba(255,255,255,.08) ajoute la légère opacité laiteuse qui distingue le verre dépoli d'une simple transparence.
La texture de grain — le « Noise » du nom — provient du pseudo-élément ::after : un filtre SVG feTurbulence encodé en data URI génère un bruit fractal avec type="fractalNoise", baseFrequency="0.8" et 4 octaves. Ce grain est composé par mix-blend-mode: overlay à opacity: .12 : il brûle subtilement dans la surface sans écraser les couleurs du fond.
La scène (.ng-frosted-scene) porte un dégradé linéaire à trois teintes dont la position est animée par @keyframes ngFrostedShift — la background-position oscille de 0 50% à 100% 50% en 6 secondes en mode alternate. Ajouter background-size: 200% 200% sur la scène amplifie ce défilement en un vrai glissement chromatique visible.
Le liseré lumineux — border: 1px solid rgba(255,255,255,.15) sur un border-radius: 16px — simule la réflexion spéculaire visible sur du verre givré réel tenu sous la lumière. C'est ce détail qui donne au composant son apparence de matière tangible plutôt que d'une simple surcouche de flou.
Accessibilité
- prefers-reduced-motion non géré dans le code : l'animation
ngFrostedShifttourne sans condition. Sur une page réelle, ajouter@media (prefers-reduced-motion: reduce) { .ng-frosted-scene { animation: none } }pour arrêter le défilement. - Le contenu de
.ng-frosted-glass(balisesh3,pet tout HTML natif) est lisible par les lecteurs d'écran sans balisage supplémentaire — aucunaria-hiddenn'est appliqué à tort. - Aucune interaction au clavier n'est requise (composant 100 % CSS) — ni
tabindexni gestionnaire de focus à ajouter sur l'effet lui-même. - Le contraste texte/fond dépend du gradient animé sous-jacent. Ajouter
text-shadow: 0 1px 8px rgba(0,0,0,.5)sur les textes ou abaisser la luminosité du fond (filter: brightness(.85)sur.ng-frosted-scene) si le dégradé contient des tons très clairs. - Si la carte
.ng-frosted-glassest un composant autonome significatif (modale, alerte, région), lui ajouterrole="dialog"ourole="region"et unaria-labeldescriptif.
Compatibilité navigateur
Repose sur backdrop-filter, les animations CSS et les filtres SVG en data URI — pris en charge dans tous les navigateurs modernes depuis 2022.
Sans support <code>backdrop-filter</code> (Firefox < 103, anciens Android), la carte affiche son fond semi-transparent blanc (<code>rgba(255,255,255,.08)</code>) sans le flou givré — encore lisible et visuellement cohérent.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="ng-frosted-scene">
<!-- Arrière-plan : gradient animé (ou image/vidéo en position:absolute derrière) -->
<div class="ng-frosted-glass">
<!-- Contenu de la carte : h3, p, button… -->
<!-- La couche de grain SVG est appliquée automatiquement par ::after -->
</div>
</div>HTML + CSS + JS complet, prêt à coller — avec des centaines d'effets premium.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
| backdrop-filter: blur(…) | blur(16px) | Intensité du flou givré. blur(8px) = verre fin et transparent ; blur(28px) = verre épais très dépoli. Au-delà de 30 px, des artéfacts peuvent apparaître sur certains navigateurs. |
| rgba(255,255,255, .08) — fond .ng-frosted-glass | .08 | Opacité de remplissage de la carte. Monter vers .18 pour un verre plus opaque ; descendre à .04 pour un verre quasi invisible. |
| rgba(255,255,255, .15) — border | .15 | Intensité du liseré lumineux. Entre .10 (discret) et .35 (très marqué) selon le contraste avec le fond. |
| opacity: .12 — ::after (grain) | .12 | Intensité de la texture grain. .06 = grain quasi invisible ; .22 = grain photographique prononcé. |
| mix-blend-mode — ::after (grain) | overlay | Mode de fusion du grain. overlay = contraste naturel ; soft-light = grain plus doux ; multiply = grain foncé uniquement. |
| gradient de .ng-frosted-scene | linear-gradient(135deg, #06b6d4, #8b5cf6, #ec4899) | Couleurs du fond animé. Remplacez par votre palette brand — 2 à 4 teintes suffisent pour un résultat propre. |
| durée de l'animation (6s) | 6s | Vitesse du défilement chromatique. 4s = dynamique ; 12s = glissement lent ; animation: none pour un fond fixe sans défilement. |
| border-radius: 16px | 16px | Arrondi des coins de la carte. 8px = card moderne ; 24px = bulle arrondie ; 0 = carte pleine largeur angulaire. |
FAQ
.ng-frosted-scene dans un composant, l'effet ne modifie rien en dehors de ses propres éléments..ng-frosted-scene par n'importe quel conteneur position: relative; overflow: hidden contenant une image ou une vidéo en position: absolute; inset: 0; object-fit: cover. Placez ensuite .ng-frosted-glass par-dessus avec un z-index supérieur — backdrop-filter floute automatiquement le média peint derrière dans le même contexte d'empilement.backdrop-filter est pris en charge nativement depuis Firefox 103 (juillet 2022), couvrant environ 94 % des sessions Firefox actives. Sur Firefox < 103, la carte affiche le fond semi-transparent (rgba(255,255,255,.08)) sans flou givré — le composant reste lisible et fonctionnel. Pas de préfixe -webkit- nécessaire pour les cibles modernes.
