Générateur de glassmorphism
NouveauConcevez une carte en verre dépoli et copiez le CSS, avec un aperçu en direct.
Browser support. backdrop-filter works in all current browsers; the copied CSS includes the -webkit- prefix for Safari. Unsupported browsers fall back to the plain translucent background.
Readability. Transparency changes contrast over busy backgrounds. Raise the tint opacity and aim for a 4.5:1 text-contrast ratio so content stays legible.
Runs entirely in your browser. Nothing is uploaded.
Concevez votre glassmorphism sans écrire de CSS
Ce générateur glassmorphism vous permet de créer l'effet verre dépoli visuellement — faites glisser les curseurs pour le flou, la transparence, la teinte, la saturation, la bordure et l'ombre, et observez votre carte verre se mettre à jour en temps réel. Lorsque le résultat vous convient, copiez le CSS exact (avec le préfixe -webkit- pour la compatibilité), les classes Tailwind équivalentes, ou un extrait HTML prêt à coller. Fini les approximations sur les valeurs backdrop-filter et les installations inutiles — tout fonctionne directement dans votre navigateur.
Le glassmorphism est le style d'interface translucide en verre dépoli popularisé par macOS, Windows 11 et d'innombrables tableaux de bord modernes. Il apporte profondeur et élégance aux cartes, modales, barres de navigation et formulaires de connexion, tout en laissant transparaître l'arrière-plan coloré à travers la surface. Trouver ces valeurs à la main implique des cycles interminables de sauvegarde et de rechargement ; cet outil vous permet de sauter toutes ces étapes.
Comment fonctionne l'effet verre dépoli
Trois propriétés CSS créent cet effet. Un fond semi-transparent tel que rgba(255,255,255,0.18) laisse apparaître le contenu en dessous. Un flou d'arrière-plan — backdrop-filter: blur(10px) — applique un effet de givrage sur tout ce qui se trouve derrière l'élément, et non sur son propre contenu. Et une bordure fine comme 1px solid rgba(255,255,255,0.3) capte la lumière sur les bords. Ajoutez un doux box-shadow et un généreux border-radius, et le panneau ressemble à une vitre en verre.
La saturation joue également un rôle important : enchaîner saturate(120%) avec le flou amplifie les couleurs qui transparaissent, donnant au verre haut de gamme son aspect lumineux et vivid. Cet outil expose tous ces contrôles — rayon de flou, couleur de teinte, opacité de teinte, saturation, largeur de bordure, opacité de bordure, border-radius et intensité d'ombre — afin que vous puissiez affiner le CSS verre dépoli avec précision, sans jamais toucher à une ligne de code.
Sortie CSS et Tailwind côte à côte
Changez d'onglet pour obtenir votre effet en CSS pur, en classes Tailwind glassmorphism, ou sous forme d'un extrait HTML + <style> complet prêt à coller. La sortie CSS inclut toujours le préfixe -webkit-backdrop-filter pour assurer la compatibilité avec Safari. La sortie Tailwind utilise des utilitaires à valeurs arbitraires comme backdrop-blur-[10px], bg-[#ffffff]/18, border-[#ffffff]/30 et rounded-[16px] pour que les classes correspondent exactement à vos curseurs — pratique que vous préfériez le CSS écrit à la main ou un flux de travail utilitaire.
Cette double sortie est l'une des lacunes majeures des outils concurrents. Glassmorphism.com et Glass UI n'exportent que du CSS pur, laissant les utilisateurs de Tailwind traduire manuellement les valeurs. UtiloKit génère les deux automatiquement, vous permettant de copier directement dans votre base de code quelle que soit votre pile technologique.
Prévisualisez sur votre propre arrière-plan
Le verre ne ressemble à du verre que lorsqu'il y a quelque chose de coloré derrière lui. La prévisualisation en direct s'affiche donc sur un arrière-plan que vous contrôlez. Choisissez parmi des dégradés prédéfinis — coucher de soleil, océan, aurore, vibrant et une scène sombre — ou importez votre propre image pour tester le verre sur la photo ou l'image d'en-tête exacte que vous utiliserez. C'est ce qui rend la prévisualisation de l'arrière-plan glassmorphism réaliste plutôt que d'afficher un simple aperçu plat, et cela vous permet de vérifier le contraste du texte par rapport à la partie la plus chargée de la scène.
L'import d'un arrière-plan personnalisé est une fonctionnalité que glassmorphism.com ne propose pas. Lorsque vous concevez une superposition en verre pour une photographie d'en-tête spécifique, tester sur un dégradé générique ne vous donne aucune indication fiable sur la lisibilité. Importer votre image réelle vous permet de détecter les problèmes de contraste avant qu'ils n'atteignent la production.
Comment UtiloKit se compare aux autres générateurs glassmorphism
La plupart des alternatives vous offrent un simple extrait CSS avec un arrière-plan unique. Glassmorphism.com (le populaire outil de Michal Malewicz) ne propose ni sortie Tailwind, ni import d'arrière-plan personnalisé, ni lien partageable pour la revue en équipe. Glass UI (glass-ui.com) est tout aussi limité — il n'expose pas la saturation, l'intensité du box-shadow, ni la couleur de teinte de façon indépendante. Les tutoriels CSS-tricks et les snippets Codepen vous donnent du code statique que vous devez modifier manuellement chaque fois qu'un designer change la maquette.
UtiloKit vous offre tous les contrôles sur un seul écran : flou, couleur de teinte, opacité de teinte, saturation, largeur de bordure, opacité de bordure, border-radius et box-shadow. Le lien de partage intègre toutes ces valeurs dans l'URL, vous permettant d'envoyer à un collègue la spec exacte. Aucun compte, aucun import, aucun filigrane — copiez et déployez.
Préréglages, compatibilité navigateur et lisibilité
Quatre préréglages en un clic — Carte givrée, Verre sombre, Barre de navigation et Vibrant — vous donnent un solide point de départ que vous pouvez affiner. Le CSS généré inclut toujours le préfixe -webkit-backdrop-filter, de sorte que l'effet fonctionne sur Chrome, Edge, Firefox et Safari, et se dégrade élégamment en un fond translucide simple dans les navigateurs qui ne le prennent pas en charge.
La transparence modifiant le contraste, surveillez la lisibilité : augmentez l'opacité de teinte à environ 25-40 %, ajoutez de la saturation pour calmer les arrière-plans chargés, et visez un rapport de contraste de texte WCAG 4.5:1. Une carte en verre doit paraître légère et aérée, mais son texte ne doit jamais être difficile à lire. Si le texte devient difficile à lire dans l'aperçu en direct, c'est le signal d'augmenter l'opacité de teinte avant de déployer.
Privé, instantané et gratuit
Aucune inscription n'est nécessaire et rien n'est à installer. Chaque valeur que vous modifiez, l'aperçu en direct, et toute image que vous importez sont traités localement dans votre navigateur — rien n'est envoyé à un serveur. Partagez une configuration avec un coéquipier grâce au bouton Copier le lien, qui intègre tous vos réglages dans l'URL. Mettez en favori ce générateur de carte verre et utilisez-le chaque fois que vous avez besoin d'un effet verre dépoli, sans la contrainte d'un outil qui réclame votre adresse e-mail en premier.
Frequently asked questions
Qu'est-ce que le glassmorphism ?
Le glassmorphism est un style d'interface qui donne à un élément l'apparence d'un verre dépoli — un panneau semi-transparent qui floute tout ce qui se trouve derrière lui, avec une fine bordure lumineuse et une ombre douce pour la profondeur. On le retrouve dans macOS Big Sur, les surfaces acryliques de Windows 11 et les cartes de connexion modernes. Les trois ingrédients sont un fond translucide, un flou d'arrière-plan et une bordure subtile de 1px, par exemple : background: rgba(255,255,255,0.18); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.3).
Comment créer un effet glassmorphism en CSS ?
Donnez à l'élément un fond semi-transparent et un flou d'arrière-plan, puis ajoutez une bordure fine. Un bon point de départ est : background: rgba(255,255,255,0.18); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.3); border-radius: 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.2). L'essentiel est que le fond soit partiellement transparent pour que le flou apparaisse en dessous. Utilisez les curseurs ci-dessus pour l'affiner et copiez le CSS exact.
À quoi sert backdrop-filter en CSS ?
backdrop-filter applique un effet graphique — le plus souvent blur() — à la zone située derrière un élément, et non au contenu de l'élément lui-même. Ainsi, backdrop-filter: blur(10px) floute tout ce qui est rendu derrière la boîte, créant l'effet verre dépoli. Vous pouvez également enchaîner des filtres, par exemple backdrop-filter: blur(10px) saturate(150%) pour flouter et amplifier la couleur derrière le verre simultanément. L'effet n'est visible que si le fond de l'élément est au moins partiellement transparent.
Comment faire un effet verre dépoli en CSS ?
Le verre dépoli est un glassmorphism avec un flou plus prononcé et une teinte légèrement plus opaque. Essayez : background: rgba(255,255,255,0.25); backdrop-filter: blur(16px) saturate(120%); border: 1px solid rgba(255,255,255,0.4); border-radius: 16px. Augmentez le flou à 14-20px et l'opacité de la teinte à environ 20-30 % pour que la surface soit perçue comme « dépoli » plutôt que transparente. Le préréglage Carte givrée d'UtiloKit configure ces valeurs instantanément, vous pouvez partir de là et les ajuster.
Est-ce que backdrop-filter fonctionne dans tous les navigateurs ?
Oui — backdrop-filter est pris en charge par tous les navigateurs modernes majeurs (Chrome, Edge, Firefox et Safari). Safari le supporte depuis longtemps via le préfixe -webkit-backdrop-filter, donc incluez toujours les deux lignes : -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px). Le générateur glassmorphism d'UtiloKit produit automatiquement la version préfixée. Les très anciens navigateurs qui ne le supportent pas affichent simplement votre fond semi-transparent, ce qui se dégrade élégamment.
Pourquoi mon backdrop-filter / glassmorphism ne fonctionne pas ?
Les trois causes habituelles sont : (1) il n'y a rien derrière l'élément à flouter — backdrop-filter n'affecte que le contenu rendu derrière lui, donc placez-le sur une image ou un dégradé ; (2) le fond de l'élément est entièrement opaque — utilisez un fond rgba() comme rgba(255,255,255,0.18) pour que le flou apparaisse ; (3) vous avez oublié le préfixe -webkit-backdrop-filter pour Safari. Notez également qu'un ancêtre avec filter, transform ou will-change peut créer un bloc conteneur qui casse entièrement l'effet.
Comment faire du glassmorphism avec Tailwind CSS ?
Combinez les utilitaires backdrop-blur avec un fond translucide et une bordure subtile. Par exemple : class="backdrop-blur-md bg-white/10 border border-white/20 rounded-2xl shadow-lg". Utilisez backdrop-saturate-150 pour amplifier la couleur derrière le verre. Pour des valeurs précises, basculez la sortie ci-dessus sur l'onglet Tailwind — il génère des classes à valeurs arbitraires comme backdrop-blur-[10px] bg-[#ffffff]/18 border-[1px] border-[#ffffff]/30 rounded-[16px] qui correspondent exactement à vos curseurs.
Quelle est la différence entre glassmorphism et neumorphism ?
Le glassmorphism utilise la transparence et un flou d'arrière-plan pour que l'élément ressemble à du verre dépoli flottant au-dessus du contenu. Le neumorphism (soft UI) est l'opposé : des éléments opaques de la même couleur que la page, avec un aspect extrudé en 3D grâce à des ombres claires et sombres associées — par exemple box-shadow: 8px 8px 16px #c5c5c5, -8px -8px 16px #ffffff. Le glassmorphism nécessite un arrière-plan coloré pour briller ; le neumorphism nécessite un arrière-plan uni et plat pour fonctionner.
Quelle valeur de flou dois-je utiliser ?
Pour la plupart des cartes, un flou d'arrière-plan de 8 à 16px convient bien. Utilisez environ 5-8px pour un verre léger et à peine givré, 10-16px pour une carte ou une modale classique, et 16-25px pour une barre de navigation ou un overlay avec un fort effet verre dépoli. Associez un flou plus élevé à une opacité de teinte légèrement plus forte pour que le texte reste lisible. Le curseur de flou va de 0 à 40px, vous pouvez ainsi trouver le réglage idéal pour votre image d'arrière-plan sans tâtonner.
Comment garder le texte lisible sur un fond en verre ?
La lisibilité dépend du contraste entre le texte et l'arrière-plan flouté. Augmentez l'opacité de la teinte à environ 25-40 % pour que la surface soit moins transparente, ajoutez backdrop-saturate pour atténuer les couleurs vives en arrière-plan, et choisissez une couleur de texte avec un fort contraste — du texte blanc sur un verre à teinte sombre, ou du texte sombre sur une teinte claire. Visez le rapport de contraste WCAG de 4,5:1 pour le texte courant, et évitez de placer du texte petit sur la partie la plus colorée de l'image d'arrière-plan.
Le glassmorphism est-il accessible ?
Oui, mais il faut être attentif. La transparence rend le contraste imprévisible car la couleur derrière le verre change constamment, ce qui peut faire tomber le texte en dessous du minimum WCAG de 4,5:1. Utilisez une opacité de teinte suffisamment élevée (30 % ou plus), testez le texte par rapport à la partie la plus chargée de l'arrière-plan, et ne comptez pas sur le seul flou pour séparer le contenu. Respectez également les utilisateurs qui activent prefers-reduced-transparency en proposant un fond plus opaque dans votre CSS.
Comment UtiloKit se compare-t-il à glassmorphism.com et Glass UI ?
Glassmorphism.com (de Michal Malewicz) vous offre un point de départ rapide pour un seul style, mais il ne permet pas d'importer votre propre image d'arrière-plan, de contrôler la saturation, ni d'exporter des classes Tailwind. Glass UI (glass-ui.com) est tout aussi limité — aperçu sur un seul arrière-plan, pas de sortie Tailwind, pas de lien partageable. UtiloKit vous permet d'importer votre propre image, de régler chaque paramètre y compris la saturation et l'intensité de l'ombre, d'obtenir à la fois du CSS et du Tailwind, et de partager la configuration exacte via une URL. Tout fonctionne dans le navigateur, sans envoi vers un serveur.
Comment ajouter une carte en verre à mon site web ?
Placez un conteneur sur une image d'arrière-plan ou un dégradé, puis appliquez le CSS généré à la carte. Exemple minimal : donnez à l'élément parent un arrière-plan, puis stylisez l'enfant avec background: rgba(255,255,255,0.18); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.3); border-radius: 16px; padding: 24px. Copiez l'extrait HTML prêt à l'emploi depuis la sortie ci-dessus — il inclut le balisage et un bloc style que vous pouvez coller directement dans votre page sans configuration supplémentaire.
Puis-je utiliser ce générateur glassmorphism sur iPhone ou Android ?
Oui. Le générateur glassmorphism d'UtiloKit est entièrement adapté aux mobiles et fonctionne dans Safari sur iPhone, Chrome sur Android, et tout navigateur mobile moderne. Les curseurs sont optimisés pour le tactile, l'aperçu en direct se met à jour en temps réel, et la copie du CSS ou de la sortie Tailwind fonctionne depuis le presse-papiers de votre téléphone exactement comme sur un ordinateur. Tout s'exécutant dans le navigateur sans serveur, aucune installation n'est nécessaire — ouvrez simplement la page et commencez à concevoir.
Puis-je partager ma configuration glassmorphism avec un collègue ?
Oui — cliquez sur le bouton Copier le lien et toutes les valeurs de vos curseurs sont encodées directement dans l'URL. Partagez ce lien avec un designer ou un développeur et il ouvrira votre configuration exacte : même flou, même couleur et opacité de teinte, même saturation, mêmes réglages de bordure et d'ombre. Aucun compte nécessaire, aucun fichier à exporter. C'est l'un des domaines où glassmorphism.com et Glass UI sont insuffisants — aucun des deux ne prend en charge les liens de configuration partageables.
Related tools
Voir tous les outils
Nouveau Vérificateur de contraste de couleur
Vérifiez les rapports de contraste WCAG AA/AAA entre les couleurs de texte et d’arrière-plan.
Nouveau Générateur de dégradés CSS
Créez des dégradés CSS linéaires, radiaux et coniques avec un aperçu en direct.
Nouveau Générateur de box-shadow CSS
Créez des box-shadows CSS multicouches avec préréglages et aperçu en direct. Copiez le CSS, la valeur ou le style React instantanément.
Nouveau Générateur de palette de couleurs
Générez des palettes complémentaires, analogues, triadiques et monochromes.
Nouveau Générateur de courbe de Bézier
Concevez une courbe d’accélération CSS en déplaçant les points de contrôle, avec un aperçu en direct.
Nouveau Générateur de border-radius
Concevez visuellement des coins arrondis CSS et des formes organiques en blob.