Generateur de Glassmorphisme
Creez des effets CSS glassmorphism avec des controles visuels. Ajustez l'opacite, le flou et la saturation pour une interface en verre depoli.
Fonctionnalites principales
- Opacité, flou et saturation réglables
- Sélection de couleur de teinte personnalisée
- Aperçu en direct sur des arrière-plans en dégradé
- Sortie CSS prête à copier
Guide
Le glassmorphism est un style de design visuel où les éléments d'interface apparaissent comme des panneaux de verre dépoli flottant sur un arrière-plan coloré. L'effet repose sur trois propriétés CSS travaillant ensemble : la transparence de l'arrière-plan (rgba ou hsla avec un alpha faible), le flou d'arrière-plan (backdrop-filter: blur()) et une bordure ou une ombre subtile qui définit le bord du panneau. Le style a gagné en prominence en 2020 avec macOS Big Sur d'Apple et est depuis devenu un élément incontournable du design d'interface web et mobile moderne. Ce guide couvre l'implémentation technique, les implications de performance, les principes de design et les motifs pratiques pour utiliser efficacement le glassmorphism. Le CSS de base pour un panneau glassmorphism exige trois déclarations. Premièrement, un arrière-plan semi-transparent : background: rgba(255, 255, 255, 0.15) pour un effet de verre clair ou background: rgba(0, 0, 0, 0.25) pour un effet de verre sombre. Deuxièmement, un flou d'arrière-plan : backdrop-filter: blur(12px). Troisièmement, une bordure qui capte la lumière : border: 1px solid rgba(255, 255, 255, 0.2). La combinaison d'un arrière-plan transparent, d'un arrière-plan flouté et d'une bordure lumineuse crée l'illusion du verre dépoli. Sans aucun de ces trois composants, l'effet tombe à plat. Un arrière-plan transparent sans flou ressemble à un overlay coloré. Un flou sans transparence ne montre rien derrière l'élément. Et sans bordure, les bords du panneau disparaissent dans l'arrière-plan. La propriété backdrop-filter applique des effets graphiques à la zone derrière un élément. Elle prend en charge les mêmes fonctions de filtre que la propriété CSS filter : blur(), brightness(), contrast(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), sepia() et drop-shadow(). Pour le glassmorphism, blur() est la fonction principale. Le rayon de flou contrôle l'intensité de l'effet dépoli : blur(4px) crée une douceur subtile, blur(12px) crée un givrage moyen et blur(24px) crée un givrage épais où les détails de l'arrière-plan sont à peine visibles. Vous pouvez combiner plusieurs fonctions : backdrop-filter: blur(12px) saturate(180%) ajoute de la vivacité aux couleurs de l'arrière-plan flouté, faisant paraître les couleurs derrière le verre plus vives. La valeur du rayon de flou détermine l'aspect plus ou moins vitreux ou solide du panneau. Les valeurs faibles (4px à 8px) conservent plus de détails d'arrière-plan et paraissent plus légères. Les valeurs moyennes (10px à 16px) créent l'aspect classique du verre dépoli. Les valeurs élevées (20px+) masquent presque entièrement l'arrière-plan, point auquel vous perdez la métaphore du verre et le panneau ressemble à une surface translucide solide. Pour la plupart des applications d'interface, 8px à 16px atteint le bon équilibre entre intérêt visuel et lisibilité du contenu. Testez votre rayon de flou choisi avec votre contenu d'arrière-plan réel pour vérifier que l'effet fonctionne comme prévu. L'alpha de l'arrière-plan (transparence) fonctionne en tension avec le rayon de flou. Un arrière-plan avec un alpha très faible (0,05 à 0,10) montre plus de l'arrière-plan flouté, créant une sensation plus légère et plus transparente. Un arrière-plan avec un alpha plus élevé (0,25 à 0,40) masque plus de l'arrière-plan, créant une sensation plus solide et opaque. La bonne combinaison dépend de ce qui se trouve derrière le panneau de verre. Sur un arrière-plan chargé et coloré, un alpha plus élevé et un flou plus fort garantissent que le texte reste lisible. Sur un arrière-plan simple et atténué, un alpha plus faible et un flou plus léger créent un effet plus élégant. Il n'y a pas de combinaison unique correcte. Chaque contexte de design exige des tests pour trouver l'équilibre entre effet visuel et utilisabilité. La bordure et l'ombre définissent le bord du panneau de verre et sont essentielles pour que l'illusion fonctionne. Sans bordure, le panneau se fond dans son environnement et perd sa qualité dimensionnelle. Une bordure fine utilisant rgba(255, 255, 255, 0.18) sur un panneau de verre clair ou rgba(255, 255, 255, 0.08) sur un panneau de verre sombre simule la lumière attrapant le bord du verre réel. Box-shadow ajoute de la profondeur : box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) pour une ombre légère ou box-shadow: 0 8px 32px rgba(0, 0, 0, 0.37) pour une élévation plus dramatique. L'ombre renforce le fait que le panneau flotte au-dessus de l'arrière-plan. Certaines implémentations ajoutent une seconde ombre intérieure pour plus de dimension. La performance de backdrop-filter est la considération la plus importante pour une utilisation en production. Le flou d'arrière-plan est gourmand en GPU parce que le navigateur doit rendre le contenu derrière l'élément, appliquer le filtre de flou à ce contenu rendu, puis composer le résultat flouté sous l'élément semi-transparent. Cela se produit à chaque image si quoi que ce soit derrière le panneau de verre change (défilement, animations, vidéo). Sur les GPU de bureau haut de gamme, c'est fluide. Sur les appareils mobiles bas de gamme, cela peut causer des chutes d'images significatives et une décharge de la batterie. Le coût de performance augmente avec le rayon de flou et la zone floutée. Une petite carte de verre avec blur(8px) est beaucoup moins coûteuse qu'une barre de navigation en verre en pleine largeur avec blur(20px). Les stratégies d'optimisation des performances incluent : limiter le nombre d'éléments en verre visibles à la fois (évitez de mettre des panneaux de verre sur chaque carte d'une grille de 50 éléments), réduire le rayon de flou sur mobile (blur(8px) au lieu de blur(20px) sur les petits écrans), éviter les effets de verre sur des arrière-plans animés ou vidéo sur mobile, et utiliser will-change: backdrop-filter comme indice au navigateur pour préparer les ressources GPU. Vous pouvez aussi utiliser la propriété contain: paint sur l'élément en verre pour limiter la portée de composition. Testez sur de vrais appareils bas de gamme, pas seulement sur votre machine de développement. Un effet de verre qui fonctionne bien sur un MacBook Pro peut saccader sur un téléphone Android d'entrée de gamme avec un GPU Adreno 505. La prise en charge de backdrop-filter par les navigateurs est désormais répandue. Chrome, Edge, Safari et Firefox la prennent tous en charge. Le préfixe -webkit- (-webkit-backdrop-filter) est encore nécessaire pour les versions de Safari antérieures à 18. Internet Explorer ne la prend pas en charge. Pour les navigateurs sans prise en charge, la solution de repli est un arrière-plan semi-transparent solide sans flou. Définissez-le comme valeur par défaut et superposez le flou : background: rgba(255, 255, 255, 0.7) comme solution de repli (plus opaque pour maintenir la lisibilité sans flou), puis @supports (backdrop-filter: blur(1px)) { background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(12px); } pour les navigateurs capables. La solution de repli maintient l'utilisabilité au détriment de l'effet de verre. Un extrait CSS complet de glassmorphism ressemble à ceci. Pour les styles de base : background: rgba(255, 255, 255, 0.7) comme solution de repli pour les navigateurs sans prise en charge de backdrop-filter. Puis à l'intérieur d'un bloc @supports : background: rgba(255, 255, 255, 0.15), suivi de backdrop-filter: blur(12px) et -webkit-backdrop-filter: blur(12px). À l'extérieur du bloc @supports, ajoutez border: 1px solid rgba(255, 255, 255, 0.2), box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) et border-radius: 16px. Ce motif couvre tous les navigateurs avec une dégradation gracieuse. La température de couleur de l'effet de verre définit l'ambiance. Un verre chaud utilise des arrière-plans légèrement teintés : rgba(255, 200, 150, 0.15) ajoute une teinte ambre chaude. Un verre froid utilise des teintes bleues : rgba(100, 150, 255, 0.15). Un verre neutre utilise du blanc ou du noir à différentes opacités. La teinte interagit avec les couleurs derrière le verre, donc la couleur perçue change à mesure que l'arrière-plan change. Cette qualité dynamique fait partie de ce qui donne au glassmorphism une sensation vivante et réactive au contexte. Pour un verre de couleur de marque, utilisez votre couleur de marque à un alpha très faible (0,05 à 0,15) pour maintenir l'effet translucide tout en renforçant l'identité de marque. Le glassmorphism en mode sombre inverse l'approche. Au lieu d'un verre clair sur un arrière-plan coloré, utilisez un verre sombre (rgba(0, 0, 0, 0.40) ou rgba(17, 25, 40, 0.60)) avec une bordure plus claire (rgba(255, 255, 255, 0.08)). Le flou d'arrière-plan fonctionne de la même façon. Les panneaux de verre sombre paraissent sophistiqués sur des arrière-plans sombres avec des dégradés de couleur subtils ou des effets de lumière ambiante. Le Centre de contrôle d'Apple sur iOS est un exemple canonique de glassmorphism sombre. Pour le mode sombre, le changement de couleur de bordure est important : passez des bordures blanches à des versions légèrement plus claires de l'arrière-plan sombre pour maintenir le bord du verre sans que la bordure ne paraisse trop brillante. La lisibilité du texte sur les panneaux de verre exige une attention soigneuse parce que c'est là que le glassmorphism échoue le plus couramment. L'arrière-plan semi-transparent et flouté signifie que la couleur d'arrière-plan effective change selon ce qui se trouve derrière le panneau. Le texte blanc peut être lisible lorsque le panneau est sur une zone sombre de l'arrière-plan mais illisible lorsqu'il se déplace sur une zone claire (pendant le défilement, par exemple). Les solutions incluent : utiliser un alpha d'arrière-plan plus élevé pour garantir un contraste minimum quel que soit l'arrière-plan, ajouter un text-shadow pour une séparation supplémentaire (text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3)), utiliser des graisses de police plus boldes (600 ou 700 au lieu de 400), et s'assurer que l'arrière-plan derrière les panneaux de verre est contrôlé et pas trop varié en luminosité. Le verre en couches crée de la profondeur en empilant plusieurs panneaux de verre avec différents niveaux de flou et opacités. Une couche de verre d'arrière-plan avec un flou épais et une faible opacité se trouve derrière un panneau de verre de premier plan avec un flou plus léger et une opacité légèrement plus élevée. Cela crée un sens de profondeur et de hiérarchie. Apple utilise cela abondamment dans macOS et iOS. Implémentez-le avec une superposition z-index : la couche d'arrière-plan a un rayon de flou plus élevé (blur(20px)) et la couche de premier plan a un rayon de flou plus faible (blur(8px)) avec légèrement plus d'opacité. Trois couches ou plus sont possibles mais rares, et chaque couche ajoute au coût de rendu. Le glassmorphism fonctionne le mieux pour des motifs d'interface spécifiques : barres de navigation flottant sur le contenu, boîtes de dialogue modales et overlays, panneaux de notification, barres latérales, éléments de carte sur des sections hero, contrôles de lecteur multimédia sur des pochettes d'album, éléments d'info-bulle et de popover, et widgets de tableau de bord sur des visualisations de données. Il fonctionne mal pour les zones de contenu dense (texte d'article, tableaux de données, formulaires avec de nombreux champs) où l'arrière-plan changeant derrière le verre distrait du contenu. Utilisez les effets de verre comme des accents, pas comme le traitement de surface par défaut pour tout sur la page. L'arrière-plan derrière le panneau de verre importe autant que le verre lui-même. Le glassmorphism paraît meilleur sur des arrière-plans colorés et en dégradé avec des transitions douces. Un dégradé du violet profond au bleu océan, ou du orange chaud au rose, fournit le toile de fond idéal pour l'effet de flou. Le panneau de verre adoucit et diffuse ces couleurs magnifiquement. Sur un arrière-plan blanc uni ou noir uni, l'effet de verre est invisible parce qu'il n'y a rien à flouter. Sur un arrière-plan photographique chargé avec des détails nets, le flou produit un résultat boueux. Concevez votre arrière-plan et vos panneaux de verre ensemble comme un système. Combiner le glassmorphism avec d'autres éléments de design améliore l'effet. Des dégradés subtils sur l'arrière-plan du panneau de verre (un linear-gradient de rgba(255,255,255,0.2) à rgba(255,255,255,0.05)) ajoutent une lumière directionnelle. Les ombres intérieures (box-shadow: inset 0 1px 0 rgba(255,255,255,0.2)) simulent la lumière frappant le bord supérieur du verre. Border-radius adoucit le panneau (16px à 24px est courant dans les designs glassmorphism). Ensemble, ces détails font que le verre paraît plus physique et tridimensionnel. L'animation avec des éléments de verre devrait être douce et intentionnelle. Faites apparaître les panneaux de verre en fondu avec des transitions d'opacité. Faites-les glisser en position avec des transformations translate. Évitez d'animer la valeur de flou de backdrop-filter elle-même, parce que changer le rayon de flou à chaque image force le navigateur à régénérer l'arrière-plan flouté, ce qui est extrêmement coûteux. Si vous avez besoin d'une animation de flou, envisagez d'animer une couche d'arrière-plan floutée séparée en utilisant CSS filter: blur() sur un pseudo-élément, ce qui est plus facile à optimiser pour les navigateurs que backdrop-filter. Les animations de transformation et d'opacité sur les éléments de verre fonctionnent bien parce qu'elles n'exigent pas de recalcul du flou. L'intégration au système de design du glassmorphism exige de définir un ensemble de jetons de verre : couleurs d'arrière-plan de verre à des opacités claires et sombres, couleurs de bordure de verre, valeurs d'ombre de verre, et rayons de flou de verre pour différents contextes. Créez des classes CSS réutilisables ou des variantes de composant : .glass-light, .glass-dark, .glass-subtle, .glass-prominent. Documentez quelles variantes de verre fonctionnent sur quels types d'arrière-plan. Cela empêche l'incohérence de valeurs de verre ad hoc à travers le codebase et garantit que l'effet se dégrade de manière cohérente dans les navigateurs non pris en charge. Le glassmorphism dans React, Vue et d'autres frameworks de composants est généralement implémenté comme un composant réutilisable ou une classe utilitaire CSS. Dans React, un composant GlassPanel accepte des props pour l'intensité du flou, l'opacité, la couleur de teinte et la visibilité de la bordure, rendant une div avec les styles calculés. Tailwind CSS rend le glassmorphism simple avec des classes utilitaires : bg-white/15 backdrop-blur-md border border-white/20 rounded-2xl shadow-lg. L'implémentation au niveau du composant garantit des effets de verre cohérents à travers l'application et fournit un endroit unique pour mettre à jour l'effet lorsque les exigences de design changent. Les préoccupations d'accessibilité avec le glassmorphism se concentrent sur la lisibilité du texte et la sensibilité au mouvement. Comme discuté, l'arrière-plan changeant derrière les panneaux de verre peut rendre le texte difficile à lire. De plus, l'effet de flou lui-même est un effet visuel que certains utilisateurs atteints de troubles vestibulaires peuvent trouver désorientant, en particulier lorsque les panneaux de verre défilent sur des arrière-plans changeants. Respectez les media queries prefers-reduced-transparency et prefers-reduced-motion. Pour les utilisateurs qui préfèrent une transparence réduite, revenez à un arrière-plan opaque solide. Pour les utilisateurs qui préfèrent un mouvement réduit, évitez d'animer les panneaux de verre. Le glassmorphism comparé à d'autres tendances de design occupe une niche spécifique. Le neumorphism (soft UI) utilise des ombres subtiles pour créer des effets en relief et enfoncé sur des arrière-plans de même couleur. Il souffre d'un mauvais contraste et de problèmes d'accessibilité. Le flat design utilise des couleurs unies sans effets de profondeur. Le Material Design utilise l'élévation et les ombres sur des surfaces opaques. Le glassmorphism se situe entre le flat design et le material design, ajoutant de la profondeur par la transparence plutôt que par l'ombre seule. Il fonctionne le mieux comme style d'accent. Une application entière en glassmorphism devient visuellement bruyante. Une utilisation sélective (navigation, modales, cartes en vedette) crée un intérêt visuel sans submerger l'utilisateur. Des exemples concrets d'implémentations de glassmorphism fournissent des points de référence. Apple utilise le glassmorphism abondamment dans macOS (barre de menus, barres latérales, Centre de notifications) et iOS (Centre de contrôle, widgets, sélecteur d'applications). Microsoft utilise le matériau Acrylic dans Windows 11 (menu Démarrer, barre des tâches, panneaux de paramètres), qui est une variation du glassmorphism avec un overlay de texture de bruit. Ces implémentations démontrent que le glassmorphism fonctionne le mieux lorsque le système d'exploitation ou l'application contrôle le contenu d'arrière-plan, garantissant un niveau cohérent de flou et de contraste. Sur le web, où vous contrôlez à la fois l'arrière-plan et les panneaux de verre, vous avez le même niveau de contrôle. L'overlay de texture de bruit ajoute un grain subtil aux panneaux de verre qui les fait paraître plus comme du verre dépoli physique. Le verre dépoli réel a une texture légèrement rugueuse, pas un flou parfaitement lisse. Vous pouvez ajouter cette texture avec un pseudo-élément utilisant un PNG de bruit ou un filtre SVG à une très faible opacité (2 à 5 pour cent). Le bruit empêche le verre de paraître trop numériquement propre. Le matériau Acrylic de Microsoft utilise cette technique. Implémentation : ajoutez un pseudo-élément ::before avec une petite image de bruit pavée comme arrière-plan, en position absolue pour remplir le panneau, et définissez l'opacité à 0,03 à 0,05. Le glassmorphism au défilement exige une implémentation soigneuse. Une barre de navigation en verre fixe sur un contenu défilant crée un effet de flou constamment changeant à mesure que différents contenus passent derrière elle. Cela paraît superbe mais est gourmand en performances parce que le backdrop-filter doit être recalculé à chaque image pendant le défilement. Pour les longues pages avec un flou lourd basé sur le défilement, envisagez d'utiliser un effet plus simple sur mobile (arrière-plan semi-transparent solide) et de réserver l'effet de verre complet pour le desktop où la puissance GPU est généralement suffisante. Tester le glassmorphism à travers différents types de contenu derrière le verre révèle à quel point votre implémentation est robuste. Testez avec du contenu texte, des images, des vidéos, des couleurs unies, des dégradés et du contenu mixte passant derrière le panneau de verre. Chaque type de contenu produit différents résultats de flou. Le texte dense derrière le verre crée un flou gris. Les images colorées créent des couleurs vives et changeantes. La vidéo crée un flou constamment changeant. Votre panneau de verre doit maintenir la lisibilité du texte et l'attrait visuel à travers tous ces scénarios, ou vous devez limiter le contenu qui peut apparaître derrière les éléments de verre. Le glassmorphism combiné avec les motifs de barre latérale dépolie crée une mise en page d'application distinctive. Une barre latérale en verre sur la zone de contenu principale fournit une navigation sans masquer entièrement le contenu. Le survol ou l'expansion de la barre latérale révèle plus de l'effet de verre. Ce motif fonctionne bien pour les tableaux de bord et les panneaux d'administration où la barre latérale est un élément secondaire. Implémentez-le avec un élément de barre latérale fixe ou collant portant les styles de verre, positionné sur la zone de contenu principale avec un z-index approprié. Des alternatives CSS uniquement à backdrop-filter existent pour les anciens navigateurs ou les situations à performances limitées. Un pseudo-élément (::before) positionné derrière le contenu peut porter une copie floutée de l'arrière-plan en utilisant background-attachment: fixed avec la même image d'arrière-plan que la page, plus un filtre CSS filter: blur(). Cette approche ne floute pas le contenu réel derrière l'élément (elle floute une image d'arrière-plan fixe à la place), donc elle ne fonctionne que pour les arrière-plans fixes, pas le contenu dynamique. Malgré cette limitation, elle produit un effet de verre convaincant avec une meilleure prise en charge de navigateur et de meilleures performances que backdrop-filter parce que le flou est appliqué une fois à une image statique plutôt que recalculé à chaque image. L'outil générateur de glassmorphism vous permet d'ajuster la couleur d'arrière-plan, l'opacité, le rayon de flou, la bordure et l'ombre en temps réel tout en prévisualisant le résultat sur un arrière-plan d'exemple. Copiez le CSS généré directement dans votre feuille de style. Commencez par les valeurs générées comme référence, puis affinez-les en contexte avec votre arrière-plan et contenu réels. Le générateur gère la syntaxe y compris le préfixe -webkit- pour la compatibilité Safari et la solution de repli @supports pour les navigateurs sans prise en charge de backdrop-filter.
Questions frequentes
Qu'est-ce que le glassmorphism ?
Le glassmorphism est une tendance de design UI avec des éléments translucides rappelant le verre dépoli, avec flou d'arrière-plan et bordures subtiles.
Le glassmorphism fonctionne-t-il dans tous les navigateurs ?
La propriété backdrop-filter est prise en charge par tous les navigateurs modernes, dont Chrome, Firefox, Safari et Edge.
