Cabinet du Lavoir · kinésithérapieRetard : 10 min · 10:42
Patient suivant : M. B.
Salle 2, au fond du couloirEn attendant : 5 minutes de vélo, résistance 2, sans forcer.
GlassmorphismGratuit
Frosted Panel
Panneau givré immobile dans un cadre sombre de 340 × 230 px : le verre (backdrop-filter: blur(24px)) occupe tout le cadre à 30 px des bords pendant que trois taches de dégradé dérivent et tournent derrière lui en continu, sur 7, 8 et 10 s — c'est le fond qui bouge, jamais le texte. CSS pur.
Mis à jour le
Frosted Panel
Les blobs bougent derrière le verre givré
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
Radio Val d'Huisne 98.4
Le directÉmissionsPodcastsBénévoles
EN DIRECT
Les Mains dans la terre
avec Josiane et Karim · 10 h – 11 h · jardiner au bocage
À suivre
11:00Le journal du canton
11:15Jour de marché : qui vend quoi ce samedi
Niveau 27Score 18 450
Pause
Niveau 27 · Les Falaises · 14 coups restants
★★☆Comment ça marche
Un cadre, trois taches, un panneau. Le cadre .frosted-panel-scene mesure 340 × 230 px, fond #080812, coins de 16 px et overflow: hidden : il porte son propre décor, la page autour garde sa couleur, et les taches qui débordent sont coupées net au bord. Les trois taches .frosted-blob sont des cercles en dégradé à 135°, floutés par filter: blur(30px) : 160 px violet → indigo partant du coin haut gauche (−30, −20 px), 140 px cyan → bleu du coin bas droit, 100 px rose → framboise posée au milieu (top: 50%; left: 60%). Le panneau .frosted-panel-element est en position: absolute; inset: 30px — 280 × 170 px mesurés dans le cadre d'origine —, blanc à 5 %, backdrop-filter: blur(24px) et -webkit-backdrop-filter, bordure blanche à 10 %, coins de 12 px, contenu centré en colonne (titre 19,2 px gras, texte 12 px à 50 % de blanc, trois pastilles de 8 px aux couleurs des taches).
Le mouvement est entièrement dans le fond. blobDrift1 (8 s) promène la tache violette par quatre étapes — (40, 20), (20, 60), (−10, 30) px — en la faisant tourner de trois quarts de tour (0 → 270°), puis revenir en arrière dans le dernier quart : comme la tache est un dégradé, sa rotation fait tourner la direction de la couleur sous le verre. blobDrift2 (10 s) fait remonter la tache cyan jusqu'à (−50, −40) px en tournant dans l'autre sens ; blobDrift3 (7 s) déplace la tache rose de (−40, −30) px en la grossissant de 30 %. Trois durées qui ne se divisent pas entre elles (7, 8, 10 s) : le motif ne se répète qu'au bout de 280 s, le fond ne paraît jamais boucler. Mesuré dans Chromium et Firefox : trois animations actives, panneau à 30 px de chaque bord. Aucun survol, aucun JavaScript, aucune variable du site.
Accessibilité
- prefers-reduced-motion absent du code : sous émulation, les trois taches continuent de dériver et de tourner. Le texte, lui, ne bouge jamais. Pour un écran d'attente regardé longtemps, ajoutez
@media (prefers-reduced-motion: reduce) { .frosted-blob { animation: none } }: le panneau garde ses couleurs, figées. - Contraste variable : le titre blanc de 19,2 px gras mesure 15,6:1. Le texte à 50 % de blanc en 12 px dépend de la tache qui passe dessous : mesuré à 5,0:1 sur fond sombre et à 2,9:1 quand la tache violette est derrière — sous le seuil de 4,5:1. Montez-le à 80–85 % de blanc (
rgba(255,255,255,.85)), comme dans les trois exemples, pour qu'il tienne quelle que soit la position des taches. - Lecteurs d'écran : un titre
h3et un paragraphe, lus normalement ; les taches et les pastilles sont des éléments vides, ignorés. Les pastilles ressemblent à un indicateur de pages mais ne sont reliées à rien : ne leur donnez pas de sens (« 3 messages ») sans le dire aussi en texte, ou cachez-les avecaria-hidden="true". - Transparence réduite : rien n'est prévu pour
prefers-reduced-transparency. Une règle suffit :@media (prefers-reduced-transparency: reduce) { .frosted-panel-element { background: rgba(20,20,40,.9); backdrop-filter: none } }.
Compatibilité navigateur
CSS seul : backdrop-filter (avec -webkit-backdrop-filter), filter: blur(), dégradés, @keyframes sur transform (translate, rotate, scale), inset. Zéro JavaScript, zéro dépendance. Flou d'arrière-plan : Chrome 76+, Edge 79+, Firefox 103+, Safari 9+ préfixé (sans préfixe depuis 18). Mesuré dans Chromium 151 : flou peint, trois animations actives. Dans Firefox 153 et WebKit 26.5 (Playwright), la valeur calculée vaut blur(24px) et CSS.supports répond vrai, mais leurs captures automatisées ne peignent pas le flou d'arrière-plan, même sur un test minimal : le rendu du verre n'a été vu que dans Chromium. Les animations sur transform passent par le compositeur : pas de recalcul de mise en page.
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
Android Chrome 76+✓ Complet
Sans backdrop-filter, le panneau reste un voile blanc à 5 % sur des taches déjà floues (filter: blur(30px)) : le mouvement de couleur reste visible, seul le dépoli disparaît, et le texte est toujours posé sur le fond sombre du cadre. inset demande Chrome 87, Firefox 66 et Safari 14.1 ; avant, remplacez-le par top/right/bottom/left: 30px.
Le code
Copiez les trois blocs dans votre page. Aucune dépendance.
HTML
<div class="frosted-panel-scene">
<div class="frosted-blob frosted-blob--1"></div>
<div class="frosted-blob frosted-blob--2"></div>
<div class="frosted-blob frosted-blob--3"></div>
<div class="frosted-panel-element">
<h3>Frosted Panel</h3>
<p>Les blobs bougent derrière le verre givré</p>
<div class="frosted-dots">
<span class="frosted-dot"></span>
<span class="frosted-dot"></span>
<span class="frosted-dot"></span>
</div>
</div>
</div>
CSS
.frosted-panel-scene {
width: 340px;
height: 230px;
position: relative;
overflow: hidden;
border-radius: 16px;
background: #080812;
}
.frosted-blob {
position: absolute;
border-radius: 50%;
filter: blur(30px);
}
.frosted-blob--1 {
width: 160px;
height: 160px;
background: linear-gradient(135deg, #a855f7, #6366f1);
top: -30px;
left: -20px;
animation: blobDrift1 8s ease-in-out infinite;
}
.frosted-blob--2 {
width: 140px;
height: 140px;
background: linear-gradient(135deg, #06b6d4, #3b82f6);
bottom: -40px;
right: -20px;
animation: blobDrift2 10s ease-in-out infinite;
}
.frosted-blob--3 {
width: 100px;
height: 100px;
background: linear-gradient(135deg, #ec4899, #f43f5e);
top: 50%;
left: 60%;
animation: blobDrift3 7s ease-in-out infinite;
}
.frosted-panel-element {
position: absolute;
inset: 30px;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
z-index: 1;
}
.frosted-panel-element h3 {
font-size: 1.2rem;
font-weight: 700;
color: #fff;
margin: 0;
}
.frosted-panel-element p {
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.5);
margin: 0;
text-align: center;
padding: 0 20px;
}
.frosted-panel-element .frosted-dots {
display: flex;
gap: 6px;
margin-top: 4px;
}
.frosted-panel-element .frosted-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
}
.frosted-panel-element .frosted-dot:nth-child(1) {
background: #a855f7;
}
.frosted-panel-element .frosted-dot:nth-child(2) {
background: #06b6d4;
}
.frosted-panel-element .frosted-dot:nth-child(3) {
background: #ec4899;
}
@keyframes blobDrift1 {
0%,
100% {
transform: translate(0, 0) rotate(0deg);
}
25% {
transform: translate(40px, 20px) rotate(90deg);
}
50% {
transform: translate(20px, 60px) rotate(180deg);
}
75% {
transform: translate(-10px, 30px) rotate(270deg);
}
}
@keyframes blobDrift2 {
0%,
100% {
transform: translate(0, 0) rotate(0deg);
}
25% {
transform: translate(-30px, -20px) rotate(-90deg);
}
50% {
transform: translate(-50px, -40px) rotate(-180deg);
}
75% {
transform: translate(-20px, -10px) rotate(-270deg);
}
}
@keyframes blobDrift3 {
0%,
100% {
transform: translate(0, 0) scale(1);
}
50% {
transform: translate(-40px, -30px) scale(1.3);
}
}
JavaScript (fx-0302)
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Taille du cadre (CSS — .frosted-panel-scene { width: 340px; height: 230px }) |
340 × 230 px, coins de 16 px | Le panneau suit tout seul grâce à inset: 30px. Pour un grand écran, agrandissez aussi les taches (200–240 px) : à leur taille d'origine elles ne couvrent plus qu'un coin du verre. |
Retrait du panneau (CSS — .frosted-panel-element { inset: 30px }) |
30 px de chaque côté | La bande non floutée autour du verre montre les taches nettes et rend le dépoli lisible par contraste. inset: 30px 70px donne un panneau plus étroit (pause de jeu) ; inset: 0 supprime la bande et l'effet devient un simple fond flou. |
Flou du verre (CSS — backdrop-filter: blur(24px) et -webkit-backdrop-filter) |
24 px | Les taches sont déjà floutées à 30 px : en dessous de 12 px le verre ne se distingue plus de la bande autour. 24–32 px pour des nappes de couleur homogènes sous le texte. |
Couleurs des taches (CSS — .frosted-blob--1 à --3, linear-gradient(135deg, …)) |
violet → indigo, cyan → bleu, rose → framboise | Gardez un dégradé à deux teintes par tache : c'est lui qui rend la rotation visible. Alignez les pastilles (.frosted-dot:nth-child(n)) sur les mêmes couleurs. |
Vitesse de dérive (CSS — blobDrift1 8s, blobDrift2 10s, blobDrift3 7s) |
8, 10 et 7 s | Multipliez les trois par le même facteur pour ralentir (×2 : 16, 20, 14 s) en gardant des durées qui ne se divisent pas entre elles. Des durées égales feraient bouger les taches en bloc. |
Fond du cadre (CSS — .frosted-panel-scene { background: #080812 }) |
#080812 | Une couleur proche de la teinte dominante des taches (#06141a pour des verts, #1a0f0a pour des orangés) donne un fond plus riche que le noir. Une image fonctionne aussi : les taches passent alors par-dessus. |
FAQ
Quelle différence avec Glass Card (fx-0301) ?
Glass Card est une carte qui flotte au-dessus de son décor, avec ombre portée, reflet diagonal et soulèvement de 4 px au survol : on interagit avec elle. Frosted Panel ne réagit à rien : il remplit son cadre à 30 px des bords et c'est le fond qui vit, trois taches qui dérivent et tournent sur 7, 8 et 10 s. Prenez Frosted Panel quand l'écran est regardé sans être touché (écran mural, encart en direct, pause) et que le mouvement doit dire « c'est actif » sans faire bouger le texte.
Le mouvement coûte-t-il cher à afficher en continu ?
Peu. Les trois animations ne touchent que transform (translation, rotation, échelle), que le navigateur confie au compositeur sans recalculer la mise en page. Le coût réel est le flou : le panneau refait son backdrop-filter de 24 px à chaque image, sur 280 × 170 px dans le cadre d'origine. Sur un écran mural qui tourne toute la journée, gardez un cadre de taille raisonnable et ajoutez la règle prefers-reduced-motion ; sur un téléviseur bas de gamme, un flou de 16 px allège encore.
Puis-je mettre une image à la place des taches ?
Oui : donnez l'image en fond au cadre (.frosted-panel-scene { background: url(...) center/cover }) et gardez ou supprimez les taches. Avec les taches, elles passent par-dessus l'image et colorent le verre ; sans elles, le panneau devient immobile sur un fond immobile — c'est alors Glass Card (fx-0301), sans le survol, qu'il vous faut. Le retrait de 30 px laisse voir l'image nette autour du verre : c'est ce contraste net/flou qui fait lire le dépoli.
