Itinéraire du jour · boucle
Col des Trois Cornes
4 h 30durée
+820 mdénivelé
11,4 kmdistance
Point d'eau : source des Chalets au km 6,2, coule jusqu'en octobre.
GlassmorphismGratuit
Glass Card
Carte de verre de 260 × 160 px en CSS pur : un seul calque backdrop-filter: blur(20px), un reflet diagonal en ::before, trois orbes colorées qui flottent derrière sur 6 s, et un soulèvement de 4 px au survol — le décor sombre est porté par la scène elle-même, lisible sur une page blanche.
Mis à jour le
Glass Card
Survol pour l'effet
Survolez ou cliquez la scène pour interagir
Cet effet est gratuit — la catégorie Glassmorphism en contient 47 au total, dont 6 gratuits. Effect.Labs regroupe 840 effets vanilla. Découvrir la catégorie →
Exemples d'usage
N° 12.4 · scanné
Honfleur, le port au petit jour
Berthe Lemoine (1841-1913)Huile sur toile, 1879 · 65 × 81 cm
Piste 24 · 2 min 40
Domaine des Grès Hauts
Le domaineNos cuvéesVisitesBoutique
Née sur les terrasses, vendangée à la mainQuatre hectares de vieilles vignes plein sud-ouest.
Rouge · vieilles vignes
Les Grès rouges 2022
CépageSyrah 80 %, grenache 20 %
MillésimeÉté chaud, vendangé le 2 septembre
AccordAgneau de sept heures, chèvre affiné
Bouteille 75 cl19 €
Comment ça marche
Deux étages dans un conteneur. Le conteneur .glass-card-scene (320 × 220 px, background: #080812, border-radius: 20px, overflow: hidden) porte le décor : trois orbes .glass-card-orb de 120, 100 et 80 px — violet #8b5cf6 en haut à gauche, cyan #06b6d4 en bas à droite, rose #ec4899 au centre — floutées par filter: blur(40px) et animées par glassOrbFloat (6 s, ease-in-out, en boucle, décalées de 0, −2 et −4 s) : à 33 % elles glissent de 15 px à droite et 10 px vers le haut en grossissant de 10 %, à 66 % de 10 px à gauche et 15 px vers le bas en rétrécissant de 10 %. Au-dessus, la carte .glass-card-element (260 × 160 px, z-index: 1, coins de 16 px) est un blanc à 7 % d'opacité avec backdrop-filter: blur(20px) et son préfixe -webkit-, une bordure blanche à 12 % et une ombre 0 8px 32px noire à 40 %. C'est ce flou d'arrière-plan qui fait le verre : il étale les orbes déjà floues en nappes de couleur sous le texte.
Le pseudo-élément ::before pose le reflet : un dégradé à 135° de blanc à 12 % vers transparent à mi-carte, avec pointer-events: none pour ne pas gêner le survol. Au survol, la carte monte de 4 px (translateY(-4px), mesuré dans Chromium et Firefox) et son ombre devient un halo violet 0 12px 40px à 30 %, en 0,3 s. Titre en 17,6 px gras blanc, sous-titre en 12,8 px à 60 % de blanc. Aucun JavaScript, aucune dépendance, aucune variable du site.
Deux choix du code tiennent à la page où vous le collerez. Le fond sombre #080812 est porté par .glass-card-scene elle-même, avec des coins arrondis et overflow: hidden pour garder les halos des orbes dans le cadre : sans ce fond, dans une page blanche, le titre blanc tomberait à 1,9:1 et 1,7:1 de contraste aux deux coins de la carte (mesuré), contre 5,9:1 aux mêmes points avec lui — et la page autour garde sa couleur. L'orbe rose, elle, est placée par top et left: calc(50% - 40px) plutôt que par transform: translate(-50%, -50%) : l'animation réécrit transform, et un centrage par translation serait écrasé — c'est son coin, pas son centre, qui tomberait au milieu, 40 px trop bas et trop à droite. Mesuré, son centre ne s'écarte du milieu que de la translation de l'animation.
Accessibilité
- prefers-reduced-motion absent du code : sous émulation, les trois orbes continuent de flotter. Le mouvement est lent (6 s, quelques pixels) et derrière un flou, mais c'est une animation en boucle sans bouton d'arrêt : ajoutez
@media (prefers-reduced-motion: reduce) { .glass-card-orb { animation: none } }— les orbes restent en place, le verre garde ses couleurs. - Contraste mesuré sur le décor d'origine : titre blanc 17,6 px gras à 8,9:1, sous-titre à 60 % de blanc en 12,8 px à 4,3:1 — juste sous le seuil de 4,5:1 du texte courant. Montez-le à 75 % de blanc (
rgba(255,255,255,.75)) pour passer. Sur une photo claire, le blanc à 7 % ne suffit plus : foncez la teinte de la carte (background: rgba(20,22,48,.2), comme dans la scène du musée) plutôt que d'augmenter le flou. - Clavier et lecteurs d'écran : la carte est un
divaveccursor: pointermais sans lien ni rôle — rien ne se passe au clic et Tab ne s'y arrête pas. Si elle mène quelque part, faites-en un<a>ou mettez un lien dans le titre, et reprenez l'effet du survol en:focus-visible. Si elle n'est qu'un bloc d'information, retirez lecursor: pointer. Les orbes sont desdivvides, ignorés par la synthèse vocale. - Préférences de transparence : rien n'est prévu pour
prefers-reduced-transparencyni pour le mode de contraste élevé. Une règle suffit :@media (prefers-reduced-transparency: reduce) { .glass-card-element { background: #1b1b2e; backdrop-filter: none } }— la carte devient opaque, le texte garde son contraste.
Compatibilité navigateur
CSS seul : backdrop-filter (avec -webkit-backdrop-filter), filter: blur(), @keyframes, flexbox, calc(). Zéro JavaScript, zéro dépendance. Le flou d'arrière-plan existe dans Chrome 76+, Edge 79+, Firefox 103+ et Safari 9+ (préfixé ; sans préfixe depuis Safari 18). Mesuré dans Chromium 151 : flou peint, survol à −4 px. Dans Firefox 153 et WebKit 26.5 (Playwright), CSS.supports('backdrop-filter', 'blur(1px)') est vrai et la valeur calculée vaut bien blur(20px), mais leurs captures automatisées ne peignent aucun flou d'arrière-plan, même sur une page de test minimale : le rendu du flou n'a donc pu être vu que dans Chromium. Mise en page, orbes, animation et survol sont identiques dans les deux moteurs testés.
Chrome 76+✓ Complet
Firefox 103+✓ Complet (flou non vérifiable en capture automatisée)
Safari 9+✓ Complet (préfixe -webkit- inclus)
Edge 79+✓ Complet
Mobile iOS 9+✓ Complet, survol remplacé par le toucher
Android Chrome 76+✓ Complet
Sans backdrop-filter (Firefox avant 103), la carte reste un voile blanc à 7 % posé sur les orbes, qui sont déjà floues par filter: blur(40px) : l'aspect givré s'affaiblit mais le texte reste lisible sur le fond sombre de la scène. Sur une vraie photo nette, prévoyez une teinte plus opaque dans @supports not (backdrop-filter: blur(1px)).
Le code
Copiez les trois blocs dans votre page. Aucune dépendance.
HTML
<div class="glass-card-scene">
<div class="glass-card-orb glass-card-orb--1"></div>
<div class="glass-card-orb glass-card-orb--2"></div>
<div class="glass-card-orb glass-card-orb--3"></div>
<div class="glass-card-element">
<h3>Glass Card</h3>
<p>Survol pour l'effet</p>
</div>
</div>
CSS
.glass-card-scene {
width: 320px;
height: 220px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
background: #080812;
border-radius: 20px;
overflow: hidden;
}
.glass-card-orb {
position: absolute;
border-radius: 50%;
filter: blur(40px);
animation: glassOrbFloat 6s ease-in-out infinite;
}
.glass-card-orb--1 {
width: 120px;
height: 120px;
background: #8b5cf6;
top: 10px;
left: 20px;
animation-delay: 0s;
}
.glass-card-orb--2 {
width: 100px;
height: 100px;
background: #06b6d4;
bottom: 10px;
right: 20px;
animation-delay: -2s;
}
.glass-card-orb--3 {
width: 80px;
height: 80px;
background: #ec4899;
top: calc(50% - 40px);
left: calc(50% - 40px);
animation-delay: -4s;
}
.glass-card-element {
position: relative;
z-index: 1;
width: 260px;
height: 160px;
background: rgba(255, 255, 255, 0.07);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.12);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.glass-card-element:hover {
transform: translateY(-4px);
box-shadow: 0 12px 40px rgba(139, 92, 246, 0.3);
}
.glass-card-element::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, transparent 50%);
border-radius: inherit;
pointer-events: none;
}
.glass-card-element h3 {
font-size: 1.1rem;
font-weight: 700;
color: #fff;
margin: 0;
}
.glass-card-element p {
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.6);
margin: 0;
}
@keyframes glassOrbFloat {
0%,
100% {
transform: translate(0, 0) scale(1);
}
33% {
transform: translate(15px, -10px) scale(1.1);
}
66% {
transform: translate(-10px, 15px) scale(0.9);
}
}
JavaScript (fx-0301)
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Intensité du verre (CSS — backdrop-filter: blur(20px) et -webkit-backdrop-filter) |
20 px | Changez les deux valeurs ensemble. 8–12 px laisse lire les formes derrière (photo nette, carte de lieu) ; 30 px et plus ne garde que des nappes de couleur. Au-delà de 40 px le gain visuel est nul et le coût de rendu monte sur mobile. |
Teinte de la carte (CSS — .glass-card-element { background: rgba(255,255,255,0.07) }) |
blanc à 7 % | Sur un décor sombre, 5–12 % de blanc. Sur une photo claire, passez à une teinte foncée (rgba(20,22,48,.2)) : le texte blanc garde son contraste sans opacifier le verre. |
Décor derrière le verre (CSS — .glass-card-scene { background: #080812 }) |
fond uni #080812, 320 × 220 px, coins de 20 px | Remplacez par votre photo (background: url(...) center/cover) ou un dégradé. Gardez le décor sur ce conteneur, pas sur body : c'est lui que le flou lit, et overflow: hidden garde les halos des orbes dans le cadre. |
Orbes (CSS — .glass-card-orb--1 à --3) |
violet 120 px, cyan 100 px, rose 80 px, flou 40 px | Couleur, taille et position libres. Pour une orbe centrée, gardez la forme calc(50% - moitié de la taille) : un transform serait écrasé par l'animation. Supprimez-les sur une photo si elle suffit à donner de la couleur. |
Flottement (CSS — animation: glassOrbFloat 6s ease-in-out infinite) |
6 s, décalages 0 / −2 / −4 s, ±15 px, ±10 % | 10–12 s pour un mouvement à peine perceptible ; augmentez les translations des keyframes (30 px) pour un fond plus vivant. Les décalages négatifs évitent que les trois orbes bougent ensemble. |
Survol (CSS — .glass-card-element:hover) |
−4 px, halo violet 0 12px 40px à 30 %, 0,3 s | translateY(-8px) pour un soulèvement franc ; remplacez rgba(139,92,246,.3) par la couleur de votre marque. Sur une carte non cliquable, supprimez la règle et le cursor: pointer. |
FAQ
Pourquoi la carte a-t-elle un fond sombre autour d'elle ?
Parce qu'un verre n'existe que s'il y a quelque chose derrière. Sans fond propre, collée dans une page blanche, la carte deviendrait un rectangle presque blanc et son titre blanc tomberait à 1,7:1 de contraste (mesuré). C'est pourquoi le décor #080812 est porté par .glass-card-scene, qui fait 320 × 220 px avec des coins de 20 px : votre page garde sa couleur, la carte a toujours son fond. Pour la poser sur une photo, remplacez ce background et étirez la scène (width et height, ou position: absolute; inset: 0 dans votre bloc), comme dans les trois exemples.
Quelle différence avec Frosted Panel (fx-0302) ?
Les deux sont gratuits et en CSS pur, mais l'un bouge et pas l'autre. Glass Card est une carte qui flotte au-dessus de son décor : 30 px de marge autour, une ombre portée, un reflet diagonal, et elle se soulève de 4 px au survol — c'est un objet sur lequel on pose la main. Frosted Panel est un panneau immobile qui remplit son cadre (marge de 30 px tout autour) pendant que trois taches de couleur dérivent et tournent derrière lui en continu sur 7 à 10 s : c'est le fond qui vit, le panneau ne réagit à rien. Prenez Glass Card pour une carte d'information sur une photo ; Frosted Panel pour un écran d'attente ou un encart « en direct ».
Le flou fonctionne-t-il dans Safari et Firefox ?
La propriété y est reconnue : Safari depuis la version 9 avec le préfixe -webkit-backdrop-filter (présent dans le code), Firefox depuis la 103. Mesuré dans Firefox 153 et WebKit 26.5 sous Playwright, la valeur calculée vaut bien blur(20px) ; en revanche leurs captures automatisées ne peignent pas ce flou, même sur un test minimal, et seul Chromium a pu être vérifié à l'œil. Sans flou, la carte reste un voile clair sur des orbes déjà floues : l'effet s'affaiblit, le texte reste lisible.
