Générateur CSS de glassmorphism

Qu'est-ce que Générateur de glassmorphism ?

Crée l'effet de verre dépoli (glassmorphism) : un panneau translucide teinté qui floute et sature ce qui se trouve derrière lui, avec une bordure claire et une ombre douce facultatives. L'aperçu place la carte sur des arrière-plans colorés pour que vous puissiez juger l'effet.

Comment utiliser Générateur de glassmorphism

1. Choisissez un préréglage : Dépoli, Verre sombre, Teinté ou Discret.
2. Ajustez Flou et Saturation de l'arrière-plan.
3. Choisissez la Couleur de teinte et l'Opacité de la teinte, l'Opacité de la bordure et le Rayon.
4. Activez Ombre portée et essayez différents Arrière-plans dans Réglages de l'aperçu.
5. Copiez le code CSS.

Exemple

Frosted preset (blur 10px, saturation 180%, white at 0.25, border 0.3, radius 16px, shadow on)

background: rgba(255, 255, 255, 0.25);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
-webkit-backdrop-filter: blur(10px) saturate(180%);
backdrop-filter: blur(10px) saturate(180%);

Quand utiliser Générateur de glassmorphism

Utilisez-le pour des cartes, des barres de navigation et des modales placées sur des images ou des dégradés colorés. L'effet n'est visible que s'il y a quelque chose derrière l'élément ; sur une couleur unie, on obtient une simple boîte translucide. Vérifiez le contraste du texte, car l'arrière-plan derrière le verre change.

Comment fonctionne Générateur de glassmorphism

Le fond du panneau est la couleur de teinte à l'opacité choisie (rgba()), et la bordure utilise la même couleur à l'opacité de bordure. Le flou et la saturation vont dans backdrop-filter: blur(px) saturate(%) ; saturate(100%) est omis car il ne change rien. La déclaration est écrite deux fois, d'abord avec le préfixe -webkit- dont Safari a encore besoin, puis sans préfixe. Si le flou vaut 0 et la saturation 100 %, aucun backdrop-filter n'est écrit.

Cas d'utilisation courants

• ✓ Barres de navigation en verre dépoli sur des images de bandeau
• ✓ Cartes de verre sur des fonds en dégradé maillé
• ✓ Boîtes de dialogue modales qui gardent le contexte visible
• ✓ Widgets de musique ou de météo
• ✓ Superpositions de verre sombre pour des commandes vidéo

Questions Fréquentes

Explorer d'autres catégories