Developer Tools
Web UtilitiesGénérateur Glassmorphism
Générez du CSS pour des effets de carte en verre givré avec flou, opacité et bordure configurables. Prévisualisez en direct et copiez le code CSS prêt à l'emploi.
Paramètres du verre
Aperçu et code CSS
.glass-card {
background: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 16px;
}blur(12px)Outils associés
À propos de cet outil
Comment ça marche
- Ajustez l'intensité du flou pour contrôler la profondeur de l'effet verre givré
- Définissez le niveau de transparence avec le curseur d'opacité
- Choisissez la couleur et l'opacité de la bordure pour le surlignage du bord du verre
- Activez ou désactivez un dégradé d'arrière-plan subtil pour la profondeur
- Choisissez entre les styles de verre sombre et clair
- Copiez le CSS généré et collez-le directement dans votre projet
Cas d'utilisation courants
- Concevoir des cartes UI modernes avec une esthétique verre givré
- Créer des superpositions de section héro sur des fonds photo
- Construire des dialogues modaux et des popups avec de la profondeur
- Styliser les barres de navigation et les barres latérales avec un effet verre
- Créer des éléments de landing page avec un aspect premium
- Ajouter de la profondeur visuelle aux tableaux de bord et aux interfaces d'analyse
Foire aux questions
Qu'est-ce que le glassmorphism ?
Le glassmorphism est une tendance moderne du design UI qui crée un aspect de verre givré en combinant un arrière-plan semi-transparent, un filtre de flou d'arrière-plan, une bordure subtile et parfois une ombre douce. Il donne aux éléments un aspect en couches et riche en profondeur, populaire sur les landing pages, tableaux de bord et cartes.
Comment fonctionne la propriété CSS backdrop-filter ?
La propriété CSS backdrop-filter applique des effets graphiques tels que le flou à la zone derrière un élément. Lorsqu'elle est combinée avec un arrière-plan semi-transparent, elle produit l'aspect verre givré. Le préfixe -webkit-backdrop-filter est requis pour une prise en charge complète de Safari.
Quels navigateurs prennent en charge backdrop-filter ?
backdrop-filter est pris en charge dans tous les navigateurs modernes : Chrome, Edge, Firefox (v103+), Safari et Opera. Le préfixe -webkit- couvre les anciennes versions de Safari. Internet Explorer ne prend pas en charge cette propriété. Le CSS généré inclut la version standard et la version préfixée pour une compatibilité maximale.
Quelle valeur de flou utiliser pour le meilleur effet glassmorphism ?
Une valeur de flou entre 8px et 20px produit généralement le meilleur aspect verre givré. Les valeurs inférieures à 4px semblent trop nettes, tandis que les valeurs supérieures à 30px peuvent paraître excessivement floues. La valeur idéale dépend de la complexité de votre arrière-plan — les arrière-plans très détaillés bénéficient de valeurs de flou plus élevées.
Pourquoi l'effet verre n'apparaît-il pas sur un fond blanc uni ?
Le glassmorphism nécessite un arrière-plan coloré ou complexe pour être visible. Si l'arrière-plan derrière la carte est blanc uni ou d'une seule couleur solide, le flou et la transparence n'ont pas de contenu visible à mélanger. Utilisez les options de dégradé ou d'image d'arrière-plan pour ajouter un fond coloré à l'aperçu.
Comment utiliser le CSS généré dans mon projet ?
Copiez le code CSS avec le bouton Copier CSS et collez-le dans votre feuille de style. Appliquez la classe .glass-card à votre élément HTML. Assurez-vous que le conteneur parent dispose d'un fond coloré ou d'une image d'arrière-plan positionnée derrière la carte de verre pour que l'effet s'affiche correctement.
Quelle est la différence entre l'opacité du verre et l'opacité de la bordure ?
L'opacité du verre contrôle la transparence de l'arrière-plan de la carte — des valeurs plus faibles laissent transparaître davantage l'arrière-plan. L'opacité de la bordure contrôle indépendamment la visibilité du surlignage du bord de la carte, qui est généralement une ligne blanche semi-transparente qui donne au bord du verre un éclat réaliste.
Puis-je ajouter un dégradé à la carte en verre plutôt qu'une couleur unie ?
Oui ! Activez le bouton bascule Dégradé d'arrière-plan dans les paramètres du verre. Vous pouvez ensuite choisir deux couleurs et un angle pour créer un arrière-plan en dégradé linéaire pour la carte en verre. Le curseur d'opacité est appliqué aux deux arrêts du dégradé, maintenant la transparence du verre givré.
Quels styles prédéfinis sont disponibles ?
L'outil comprend six préréglages : Verre Clair (givré blanc classique), Verre Sombre (panneau semi-transparent sombre), Givré (flou intense, haute opacité), Coloré (verre dégradé violet-rose), Minimal (couche de verre à peine visible) et Vibrant (verre cyan-turquoise sur fond audacieux).
Comment prévisualiser l'effet verre sur ma propre image d'arrière-plan ?
Basculez le sélecteur Scène d'arrière-plan sur URL de l'image et collez un lien direct vers une image. L'aperçu affichera votre image comme arrière-plan derrière la carte en verre. Les URL d'images accessibles publiquement fonctionnent le mieux.
Le glassmorphism affecte-t-il les performances ?
backdrop-filter peut être intensif pour le GPU, surtout avec des valeurs de flou élevées ou de nombreux éléments en verre sur la même page. Pour les performances, gardez les valeurs de flou raisonnables (sous 20px), évitez d'empiler de nombreuses couches de verre et testez sur des appareils moins puissants.
Puis-je utiliser le glassmorphism pour les boutons et les barres de navigation ?
Absolument. Le glassmorphism fonctionne bien sur les boutons, barres de navigation, barres latérales, modales, infobulles et tout élément UI flottant. Gardez le rayon de bordure approprié au type d'élément et assurez un contraste de couleur suffisant entre le texte et l'arrière-plan en verre pour la lisibilité.