Confirmation
Boîte de confirmation à double flou, en CSS pur : un voile backdrop-filter: blur(4px) estompe tout l'écran, puis la boîte de 280 px, floutée à 24 px, flotte de 5 px au-dessus en 4 s — la page reste devinée derrière la question posée. Aucun JavaScript : l'ouverture et la fermeture sont à brancher.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Glassmorphism comprend 47 effets, dont 6 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Quatre couches dans un écran .glass-modal-scene de 360 × 260 px (fond #080812, coins de 16 px, overflow: hidden). Au fond, trois taches fixes floutées à 30–35 px — magenta #d946ef de 120 px en haut à gauche, bleu ciel #0ea5e9 de 100 px en bas à droite, orange #f97316 de 80 × 120 px à droite — qui jouent le rôle de la page. Au-dessus, le voile .glass-modal-backdrop : position: absolute; inset: 0, noir à 20 %, backdrop-filter: blur(4px), z-index: 1 — mesuré, il couvre exactement les 360 × 260 px de l'écran. Puis la boîte .glass-modal-dialog, z-index: 2 : 280 px de large, centrée par top/left: 50% et translate(-50%, -50%), blanc à 8 %, backdrop-filter: blur(24px), bordure blanche à 12 %, coins de 16 px, ombre 0 16px 48px noire à 50 %, marges de 24 px, et un reflet à 135° en ::before.
Le double flou est l'idée de l'effet : le voile à 4 px laisse lire les formes de la page (une carte, une copie, un dessin), la boîte à 24 px floute à son tour ce qui passe derrière elle, déjà voilé — la question se détache en deux plans. La boîte flotte : modalFloat la monte de 5 px et la redescend en 4 s, en boucle (les keyframes reprennent le translate(-50%, -50%) pour ne pas la décentrer). Dedans : une croix de fermeture de 24 px, une icône dans un carré de 40 px en dégradé violet → cyan à 30 %, un titre de 15,2 px gras, un texte de 11,5 px à 50 % de blanc, et deux boutons qui se partagent la largeur — « Annuler » en verre, « Confirmer » en dégradé violet #8b5cf6 → indigo #6366f1 avec une ombre violette au survol.
Le voile et la boîte déclarent chacun leur flou sous les deux formes, backdrop-filter et -webkit-backdrop-filter : Safari avant la version 18 ne lit que la seconde, et sans elle n'afficherait aucun des deux flous. Ce qu'il faut savoir ensuite : il n'y a aucun JavaScript. La boîte est toujours affichée, la croix est un div sans action, les deux boutons ne font rien, et rien ne déclare la boîte comme fenêtre de dialogue (ni role="dialog", ni aria-modal, ni piège du focus, ni touche Échap). C'est l'habillage d'une confirmation, à brancher sur votre logique — voir la FAQ.
Accessibilité
- Rôle et focus : en l'état, un lecteur d'écran lit la boîte comme du texte ordinaire au milieu de la page, et Tab passe librement derrière le voile. Utilisez un élément
<dialog>ouvert parshowModal()— il apporte le rôle, l'isolement du reste de la page, la fermeture par Échap et le retour du focus — ou ajoutez à la mainrole="dialog",aria-modal="true"etaria-labelledbypointant sur le titre, puis placez le focus sur le bouton le moins risqué à l'ouverture. - Croix de fermeture : c'est un
divcontenant « ✕ », que le clavier n'atteint pas et qu'une synthèse vocale peut annoncer comme un signe de multiplication. Remplacez-le par<button type="button" aria-label="Fermer">avec le même style. - Contraste, mesuré sur le fond d'origine : titre 14,8:1, texte 4,9:1, « Annuler » 7,5:1, croix 5,3:1. Le libellé blanc de « Confirmer » tombe à 4,2:1 sur la partie claire du dégradé violet : foncez le départ (
#7c3aed) pour passer 4,5:1. Sur une page claire, teintez la boîte en sombre (rgba(15,23,42,.5)), comme dans les scènes de la carte et de la copie. - prefers-reduced-motion absent du code : la boîte continue de flotter de 5 px sous l'émulation. Un élément qui bouge pendant qu'on lit une question engageante gêne certains lecteurs :
@media (prefers-reduced-motion: reduce) { .glass-modal-dialog { animation: none } }la laisse immobile et centrée.
Compatibilité navigateur
CSS seul : deux backdrop-filter superposés (avec -webkit-backdrop-filter), filter: blur(), inset, @keyframes sur transform, flexbox. Zéro JavaScript, zéro dépendance. Flou d'arrière-plan : Chrome 76+, Edge 79+, Firefox 103+, Safari 9+ préfixé (préfixe déclaré dans le code), sans préfixe depuis Safari 18. Mesuré dans Chromium 151 : les deux flous sont peints, le second s'applique à ce que le premier a déjà voilé. Dans Firefox 153 et WebKit 26.5 sous Playwright, blur(4px) et blur(24px) sont bien calculés, mais leurs captures automatisées ne peignent aucun flou d'arrière-plan, même sur un test minimal : le double flou n'a été vu que dans Chromium. Position, taille, flottement et survol sont identiques dans Firefox.
Sans flou d'arrière-plan, le voile reste un noir à 20 % et la boîte un blanc à 8 % : la page reste visible nette derrière, la hiérarchie tient par l'ombre et la bordure de la boîte. Prévoyez un voile plus sombre (40 %) dans @supports not (backdrop-filter: blur(1px)) si la page derrière est chargée.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec Premium) :
<div class="demo-preview">
<div class="glass-modal-scene">
<div class="glass-modal-bg-shape glass-modal-bg-shape--1"></div>
<div class="glass-modal-bg-shape glass-modal-bg-shape--2"></div>
<div class="glass-modal-bg-shape glass-modal-bg-shape--3"></div>
<div class="glass-modal-backdrop"></div>
<div class="glass-modal-dialog">
<div class="glass-modal-close">✕</div>
<div class="glass-modal-icon">…</div>
<h3>…</h3>
<p>…</p>
<div class="glass-modal-actions">
<button class="glass-modal-btn glass-modal-btn--ghost">…</button>
<button class="glass-modal-btn glass-modal-btn--primary">…</button>
</div>
</div>
</div>
</div>Le code complet HTML + CSS + JS de Confirmation, prêt à coller — et les 840 effets. Ou 299 € TTC une fois, accès à vie.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Flou du voile (CSS — .glass-modal-backdrop { backdrop-filter: blur(4px) }) |
4 px, noir à 20 % | C'est le réglage le plus important : 2–4 px laissent lire la page (on sait ce qu'on confirme), 8 px et plus la rendent méconnaissable. Sur une page claire, teintez le voile en ardoise (rgba(15,23,42,.3)). |
Flou et teinte de la boîte (CSS — .glass-modal-dialog { background: rgba(255,255,255,.08); backdrop-filter: blur(24px) }) |
blanc à 8 %, 24 px | Gardez un écart net avec le voile (au moins ×4) pour que les deux plans se lisent. Sur un fond clair, passez à rgba(15,23,42,.5) : le texte blanc reste lisible. |
Étendue du voile (CSS — position: absolute; inset: 0) |
couvre l'écran .glass-modal-scene (360 × 260 px) |
Pour voiler toute la page, passez le voile et la boîte en position: fixed et sortez-les de la scène (fin du body). La boîte reste centrée par top/left: 50%. |
Flottement (CSS — animation: modalFloat 4s, translateY(-5px)) |
5 px en 4 s, en boucle | Remplacez par une entrée unique (from { opacity: 0; transform: translate(-50%, -46%) }) pour une boîte qui arrive puis se pose ; ou supprimez l'animation. Gardez translate(-50%, -50%) dans chaque étape, sinon la boîte se décentre. |
Bouton principal (CSS — .glass-modal-btn--primary) |
dégradé #8b5cf6 → #6366f1, ombre violette au survol |
Pour une action destructrice (effacer, supprimer), passez-le en rouge (#ef4444 → #dc2626) et son ombre de survol aussi. Placez l'action sûre à gauche, l'action engageante à droite, comme ici. |
Taches de la page (CSS — .glass-modal-bg-shape--1 à --3) |
magenta, bleu ciel, orange, fixes | Elles simulent une page derrière la boîte. Sur votre site, supprimez-les : c'est votre vraie page que le voile et la boîte floutent. |
FAQ
<dialog class="glass-modal-dialog"> et ouvrez-le avec dialog.showModal() ; les boutons dans un <form method="dialog"> le ferment et renvoient leur valeur (dialog.returnValue), Échap ferme aussi, et le navigateur rend le reste de la page inerte. Gardez le div du voile, affiché en même temps que la boîte (ou basculez-le avec l'attribut hidden), pour conserver le premier flou de 4 px.
