Français
Concevez des surfaces CSS en verre et néomorphisme avec aperçu en direct.
Dernière mise à jour
background: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(14px) saturate(180%);
-webkit-backdrop-filter: blur(14px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.30);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);*Glassmorphism* et *neumorphism* sont deux styles de surface que l'on voit partout dans le design web moderne. Le **verre** est le look dépoli — une carte translucide qui floute ce qui se trouve derrière, souvent posée sur un dégradé coloré ou une photo. Le **neumorphism** est le look plastique doux — une carte qui semble sortir (ou s'enfoncer) de la surface grâce à des ombres claires et sombres de la teinte du fond.
Les deux effets sont du CSS pur — pas d'image, pas de JavaScript, pas de bibliothèque. Le verre repose sur backdrop-filter: blur(), un fond translucide et une bordure fine. Le neumorphism se construit à partir de deux box-shadow : une légèrement plus sombre que la surface, une légèrement plus claire, décalées en sens opposé. La maths est courte, mais ajuster les valeurs à la main jusqu'à ce que tout tombe juste prend du temps. Un générateur saute cette étape.
L'outil donne des curseurs pour chaque paramètre qui compte, un panneau d'aperçu sur un fond configurable (pour que le verre ait quelque chose à réfracter) et la copie du CSS en un clic. Tout tourne dans votre navigateur — collez le snippet directement dans votre feuille de styles.
backdrop-filter est la propriété qui fait vivre le glassmorphism — elle floute et sature ce qui est *derrière* l'élément, pas l'élément lui-même.rgba(...) à faible alpha) et d'une fine bordure claire pour ressembler à du dépoli ; enlevez l'un ou l'autre et l'effet s'effondre.box-shadow, pas une : une plus sombre en bas-droite, une plus claire en haut-gauche, toutes deux dans la teinte de la surface plutôt qu'en noir/blanc pur.Basculez entre **Verre** et **Neumorphism** en haut. Le verre a besoin d'un fond ; le neumorphism repose sur une couleur de surface plate que vous contrôlez.
Pour le verre, les leviers principaux sont *flou* (à quel point le fond est étalé), *opacité du fond* (translucidité de la carte) et *tint* (teinte légère). Pour le neumorphism, ce sont *distance* (décalage des ombres), *flou* (douceur) et *intensité* (écart des compagnes claire/sombre par rapport à la surface).
Le verre rend mieux sur un dégradé punchy ou une photo. Le neumorphism rend mieux sur une couleur quasi-neutre (#e0e5ec est le "gris neumorphique" canonique). L'outil fournit une rangée de présets cliquables.
Trois variantes : **Saillant** (extrudé), **Plat** (mêmes ombres, sans gradient) et **Inset** (enfoncé). Essayez les trois — mêmes calculs, seul le sens change.
Cliquez sur **Copier** et collez le snippet dans votre feuille. La sortie est prête pour la prod : -webkit-backdrop-filter pour les anciens Safari, propriétés ordonnées et border-radius assorti pour qu'elle marche comme une seule classe.
Les propriétés sur lesquelles chaque effet repose réellement. Référence complète sur les pages MDN backdrop-filter et box-shadow.
| Style | Propriétés clés | Quoi régler | Notes |
|---|---|---|---|
| Verre | backdrop-filter, background translucide, border fine | Flou, saturation, alpha | Toujours ajouter -webkit-backdrop-filter pour Safari |
| Neumorphism (saillant) | Deux box-shadow + fond en gradient linéaire | Distance, flou, intensité claire/sombre | Les couleurs d'ombre suivent la teinte de surface, pas du noir/blanc pur |
| Neumorphism (inset) | Deux box-shadow inset | Mêmes contrôles que le saillant | Inset donne un bouton enfoncé ou un input creusé |
| Combiné / hybride | Verre par-dessus une plaque neumorphique | Empilez avec soin — trop de filtres tuent les perfs | Courant en dashboards : carte neumorphique, header verre |
background: rgba(255, 255, 255, 0.18);backdrop-filter: blur(14px) saturate(180%);-webkit-backdrop-filter: blur(14px) saturate(180%);border: 1px solid rgba(255, 255, 255, 0.30);border-radius: 16px;box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);Glassmorphism classique. saturate(180%) ajoute une touche de couleur vive derrière le flou — sans, le verre paraît délavé. Posez-le sur un dégradé hero ou une photo.
background: linear-gradient(145deg, #f0f5fa, #cdd1d7);border-radius: 24px;box-shadow: 16px 16px 32px #b8bcc1, -16px -16px 32px #ffffff;Les deux ombres font le boulot : une plus sombre en bas-droite et un highlight plus clair en haut-gauche. Le gradient de fond ajoute un léger reflet que l'œil lit comme "plastique".
background: #e0e5ec;border-radius: 24px;box-shadow: inset 8px 8px 16px #b8bcc1, inset -8px -8px 16px #ffffff;Ajoutez inset aux deux ombres et la carte paraît creusée plutôt que saillante — parfait pour les champs et les fonds de toggles.
-webkit-backdrop-filter. Les vieux Safari (et les WebView embarquées) ignorent backdrop-filter sans préfixe et votre verre devient un bloc opaque.-webkit-backdrop-filter en plus de backdrop-filter standard. Ce générateur émet les deux automatiquement. Sans préfixe, l'ancien Safari et les WebView iOS retombent sur la couleur background et l'effet disparaît.aria-label sur les boutons-icônes — et évitez pour les éléments qui *doivent* ressortir (erreurs, CTA primaires).backdrop-filter est supporté dans tous les navigateurs evergreen. box-shadow est universel. Surveillez la performance — backdrop-filter est une opération GPU par frame, donc gardez peu de couches de verre sur le même écran.