Générateur de glassmorphism CSS

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

Le générateur de glassmorphism CSS est un éditeur visuel gratuit du style d'interface en verre dépoli (glassmorphism), conçu pour les développeurs front-end et les designers produit. Ajustez le niveau de flou, la transparence de la surface, la saturation des couleurs, l'épaisseur de la bordure, le rayon des coins et l'intensité de l'ombre avec des champs numériques et des curseurs, puis choisissez une couleur de teinte avec le nuancier. Un volet d'aperçu montre le panneau de verre au-dessus d'un fond dégradé éclatant en temps réel, et le CSS complet — avec backdrop-filter, un arrière-plan semi-transparent, une bordure subtile et une box-shadow — est généré pour que vous le copiiez. Utilisez-le pour créer des cartes, barres de navigation, modales et superpositions en verre sans ajuster à la main l'alpha rgba ni vous souvenir du préfixe -webkit-backdrop-filter.

Comment utiliser Générateur de glassmorphism CSS

1. Réglez le Flou (en px) pour contrôler à quel point la zone derrière le panneau est dépolie.
2. Baissez la Transparence pour rendre le verre plus translucide, ou augmentez-la pour une surface plus solide.
3. Montez la Saturation au-dessus de 100 % pour que les couleurs du fond ressortent à travers le verre.
4. Choisissez une couleur de teinte avec le nuancier et ajustez la largeur de la Bordure, le Rayon et l'Ombre pour parfaire l'aspect.
5. Regardez l'aperçu se mettre à jour sur le fond en temps réel à mesure que vous modifiez chaque valeur.
6. Copiez le CSS généré dans votre feuille de style — il inclut déjà le repli -webkit-backdrop-filter.

Exemples

flou 12, transparence 25%, saturation 120%, rayon 16, bordure 1, ombre 24

backdrop-filter: blur(12px) saturate(120%); background: rgba(255, 255, 255, 0.25); …

flou 8, transparence 60%, saturation 100%, rayon 0, bordure 1, ombre 8

backdrop-filter: blur(8px) saturate(100%); background: rgba(255, 255, 255, 0.6); …

teinte #0f172a, flou 20, transparence 30%, saturation 140%, rayon 24, ombre 40

backdrop-filter: blur(20px) saturate(140%); background: rgba(15, 23, 42, 0.3); …

Questions fréquentes

Que fait backdrop-filter ?

backdrop-filter applique des effets graphiques — ici flou et saturation — à tout ce qui se trouve derrière l'élément, ce qui crée l'aspect verre dépoli. Le générateur produit à la fois backdrop-filter et le préfixe -webkit-backdrop-filter pour qu'il fonctionne sur les différents navigateurs, ainsi qu'un arrière-plan semi-transparent, une bordure et une ombre.

Pourquoi y a-t-il un réglage de transparence ?

L'effet de verre a besoin d'un arrière-plan partiellement translucide pour que le fond flouté transparaisse. Le curseur Transparence règle l'alpha de la couleur de fond du panneau (rgba) : les valeurs basses sont plus transparentes, les valeurs hautes plus opaques et solides.

Puis-je utiliser un verre coloré ou sombre ?

Oui. Choisissez n'importe quelle couleur de teinte avec le nuancier — l'outil la mélange dans l'arrière-plan rgba, vous pouvez donc créer un verre chaud, froid ou sombre. Combinez une teinte sombre avec une transparence plus élevée pour des superpositions feutrées, ou gardez du blanc pour un panneau dépoli classique.

Cela fonctionnera-t-il dans tous les navigateurs ?

La plupart des navigateurs modernes prennent en charge backdrop-filter. Le CSS généré inclut le préfixe -webkit-backdrop-filter pour Safari et les anciens Chromium, mais les navigateurs très anciens l'ignorent et affichent simplement l'arrière-plan semi-transparent sans le flou.

Mes données sont-elles envoyées quelque part ?

Non. Le générateur s'exécute entièrement dans votre navigateur avec JavaScript — vos couleurs et vos valeurs ne sont jamais envoyées à un serveur, il fonctionne donc en privé et même hors ligne une fois la page chargée.