Générateur Glassmorphism & Verre Dépoli

Générateur Glassmorphism & Verre Dépoli

Générez du code CSS moderne de glassmorphism et verre dépoli avec réglages en direct du flou backdrop-filter, opacité, bordure et ombres. Copiez instantanément du code HTML et CSS propre.

Charger un Modèle
Paramètres de Glassmorphism
16px
0.18 (82% Transmittance Optique)
#FFFFFF
1px
0.25
135°
140%
Level 3
Opacité du Grain5%
Passe Glassmorphic
Clé d'Accès Décentralisée
PROTOTYPE EN DIRECT
Transmittance de Surface
82%(16px px (σ gaussien))
TITULAIRE DE LA CARTE
ALEXANDRE DUBOIS
EXPIRE
12/28
Largeur de la Carte:440px
Hauteur de la Carte:270px
Rayon de Flou16px
Transmittance Optique82%
Ratio de Contraste10.23:1
Taille du CSS521 B
Préfixe WebKit-webkit- ON
Bande Passante GPU57 MB/s

Traitement Local Côté Client

Calculs haute performance et rendu optique exécutés intégralement dans la mémoire du navigateur.

Zéro Envoi vers un Serveur

Tous les paramètres restent strictement locaux sans aucune communication avec des serveurs externes.

Code Prêt pour la Production

Formats de sortie propres et optimisés pour CSS3, Tailwind et React, prêts au déploiement immédiat.

ToolsAA•Utilitaires web 100% privés côté client
Référence technique et guide d'architecture

Générateur Glassmorphism & Verre Dépoli — Guide de référence

Générez du code CSS moderne de glassmorphism et verre dépoli avec réglages en direct du flou backdrop-filter, de l'opacité, des bordures et des ombres. Copiez du code HTML et CSS propre instantanément.

Générateur Glassmorphism & Verre Dépoli — Guide de référence — Architecture en mémoire côté client et flux de données
Générateur Glassmorphism & Verre Dépoli — Guide de référence — Architecture en mémoire côté client et flux de données

Paramètres clés et contrôles

backdrop-filter: blur(px)Longueur CSS (px)

Contrôle le rayon de convolution gaussienne (écart-type) des pixels d'arrière-plan situés directement sous l'élément. La plage de référence optimale se situe entre 8px et 24px ; les valeurs supérieures à 32px créent des goulots d'étranglement majeurs sur le taux de remplissage (fill-rate) du GPU sur les appareils mobiles.

Par défaut : 16px
-webkit-backdrop-filter: blur(px)Propriété préfixée CSS (Vendor Prefix)

Préfixe propriétaire obligatoire du moteur WebKit, indispensable pour Apple Safari (iOS et macOS). L'omission de ce préfixe désactive totalement le flou sous Safari, laissant la carte sous la forme d'un simple polygone translucide plat sans effet de réfraction.

Par défaut : 16px
background: rgba(R, G, B, alpha)Translucidité de couleur CSS

Régule la teinte du substrat de base et la transmittance lumineuse. L'intervalle alpha optimal se situe entre 0,10 et 0,35 pour le verre teinté sombre et entre 0,25 et 0,70 pour le verre dépoli clair ; dépasser 0,75 élimine la réfraction de l'arrière-plan, tandis qu'une valeur inférieure à 0,08 anéantit le contraste structurel.

Par défaut : rgba(255, 255, 255, 0.18)
border: 1px solid rgba(255, 255, 255, alpha)Reflet spéculaire de bordure CSS

Simule la réflexion optique périphérique de Fresnel, où les arêtes du verre réfractent la lumière incidente ambiante. Les meilleurs rendus s'obtiennent avec une bordure semi-transparente de 1px dotée d'un canal alpha compris entre 0,15 et 0,40, ou via un dégradé linéaire directionnel s'estompant de la lumière vers l'ombre.

Par défaut : 1px solid rgba(255, 255, 255, 0.25)
backdrop-filter: saturate(%)Pourcentage de filtre CSS

Compense la désaturation optique provoquée par le flou gaussien. Augmenter la saturation entre 120 % et 180 % restaure l'éclat chromatique et empêche les arrière-plans floutés d'adopter un aspect terne, délavé ou crayeux.

Par défaut : 140%
Micro-bruit SVG feTurbulenceFiltre SVG / Data URI

Applique un grain de bruit fractal procédural sur la surface dépolie. Élimine les bandes de couleur par paliers (color banding) de 8 bits sur les dégradés floutés des écrans sRGB standards et recrée la texture physique et tactile du verre acrylique.

Par défaut : opacity: 0.05

Conseils de pro et bonnes pratiques

Reflet spéculaire directionnel par bordure en dégradé linéaire

Le verre physique réel réfléchit la lumière de manière asymétrique selon l'angle de la source lumineuse principale. Au lieu d'une bordure unie, appliquez une bordure en dégradé directionnel via border-image ou un pseudo-élément avec background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.05) 100%). Cela matérialise une source de lumière supérieure gauche nette et confère une profondeur tactile 3D très réaliste.

Accélération matérielle et composition GPU avec will-change

Les calculs de filtres backdrop contraignent le moteur de rendu du navigateur à capturer les couches d'arrière-plan, leur appliquer une convolution gaussienne et recomposer la scène à chaque trame. Lors de défilements fluides (smooth scroll) ou d'animations, déclarez will-change: transform ou transform: translateZ(0) pour isoler le conteneur en verre sur sa propre couche de composition GPU matérielle, éliminant ainsi les chutes de trames (dropped frames).

Contournement du bug de découpe border-radius sous Safari WebKit

Le moteur WebKit laisse fréquemment déborder des pixels floutés hors des coins arrondis ou affiche des bordures rectangulaires sans anticrénelage derrière le border-radius. Neutralisez cet artefact visuel en appliquant overflow: hidden combiné à isolation: isolate et -webkit-mask-image: -webkit-radial-gradient(white, black) sur le conteneur dépoli.

Garantie de lisibilité WCAG 2.1 AA/AAA par ombres internes

Placer du texte clair sur une surface translucide viole fréquemment l'exigence de contraste 4.5:1 des normes WCAG et RGAA lorsque les arrière-plans dynamiques oscillent entre zones sombres et claires. Intégrez un vignettage ambiant protecteur à l'aide de box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.25) ou appliquez text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) pour préserver une conformité d'accessibilité sans faille sur des fonds imprévisibles.

Pièges courants et dépannage

⚠️Le flou backdrop-filter ne produit aucun effet visible et l'arrière-plan reste parfaitement net

Vérifiez trois causes d'échec fréquentes : (1) Assurez-vous d'avoir déclaré -webkit-backdrop-filter avant backdrop-filter pour la compatibilité Safari ; (2) Vérifiez que la couleur d'arrière-plan de la carte n'est pas opaque (par exemple #FFFFFF au lieu de rgba(255,255,255,0.2)) ; (3) Vérifiez qu'aucun nœud DOM ancêtre n'utilise de propriétés CSS filter, transform ou perspective susceptibles d'interrompre la capture standard du contexte d'empilement (stacking context).

⚠️La carte dépolie paraît terne, boueuse ou devient totalement invisible sur un fond uni

Le glassmorphism est un effet optique qui repose impérativement sur des variations de contraste du support situé sous l'élément. Sur un fond monochrome uni, le flou gaussien n'a aucune variation chromatique à diffuser. Insérez sous l'élément un dégradé multicolore discret, des formes géométriques ou des éléments photographiques, puis accentuez le contraste de la bordure spéculaire de 1px.

⚠️Saccades sévères au défilement, surcharge processeur et décharge rapide de la batterie

La superposition de multiples éléments dotés de backdrop-filter contraint le GPU à une rastérisation multi-passes lors de chaque événement de défilement. Limitez le rayon de flou à 20px ou moins, évitez d'imbriquer plusieurs conteneurs backdrop-filter les uns dans les autres, désactivez le flou sur mobile via @media (hover: none) ou @media (max-width: 768px), et appliquez contain: paint.

⚠️Le texte, les icônes et les éléments enfants à l'intérieur du conteneur deviennent flous

N'utilisez jamais la propriété standard filter: blur(...) sur le conteneur, car filter s'applique sans distinction à l'élément et à l'ensemble de ses nœuds DOM enfants. Vous devez employer exclusivement backdrop-filter: blur(...), qui applique le flou uniquement aux pixels situés sous la boîte de délimitation de l'élément, en préservant la netteté absolue des textes et des icônes enfants.

Foire aux questions (FAQ)

Comment concevoir un effet de verre dépoli glassmorphism en pur CSS ?▼

Pour concevoir un effet de verre dépoli en pur CSS, combinez trois propriétés fondamentales : backdrop-filter: blur(16px) avec son préfixe -webkit-backdrop-filter: blur(16px), un fond semi-transparent comme background: rgba(255, 255, 255, 0.2), et une fine bordure spéculaire border: 1px solid rgba(255, 255, 255, 0.3). L'ajout d'ombres portées multicouches (box-shadow) et d'un filtre de saturation (backdrop-filter: blur(16px) saturate(140%)) sublime le réalisme du rendu.

Quelles sont les valeurs recommandées de rayon de flou et d'opacité pour le glassmorphism ?▼

Le compromis standard dans l'industrie associe un rayon de flou compris entre 12px et 24px à une opacité alpha d'arrière-plan entre 0,15 et 0,35. Un flou inférieur à 8px ne produit pas de diffusion esmerilée visible, tandis qu'au-delà de 32px, il surcharge lourdement la rastérisation GPU et vide la batterie. En mode sombre, privilégiez rgba(15, 23, 42, 0.3) avec un flou de 20px ; en mode clair, optez pour rgba(255, 255, 255, 0.4) avec un flou de 16px.

Quelle est la différence entre CSS filter: blur() et backdrop-filter: blur() ?▼

CSS filter: blur() applique le flou à l'élément lui-même ainsi qu'à la totalité de ses nœuds descendants (rendant les textes, boutons et images internes totalement illisibles). À l'inverse, backdrop-filter: blur() floute uniquement les éléments visuels situés directement sous la boîte de délimitation du conteneur, laissant les textes, typographies et composants d'interface enfants parfaitement nets et lisibles.

Pourquoi le flou backdrop-filter ne fonctionne-t-il pas sur certains navigateurs ?▼

L'échec de backdrop-filter survient le plus souvent lors de l'omission du préfixe -webkit-backdrop-filter requis par Apple Safari (iOS et macOS), lorsqu'une couleur de fond est déclarée à 100 % d'opacité (masquant l'arrière-plan), ou lorsqu'un conteneur parent associe overflow: hidden à des filtres CSS. Pour les navigateurs incompatibles (anciennes versions de Firefox antérieures à la 103 ou vieux WebViews Android), prévoyez une solution de repli progressive via @supports not (backdrop-filter: blur(1px)) avec un fond opaque à 85 %.

Outils et utilitaires connexes

Tous les outils →
Compresseur d'Image & Réducteur PhotoDesign

Compressez vos images en ligne sans perte de qualité. Réduisez la taille des fichiers JPG, PNG et WebP dans le navigateur sans téléversement, avec solveur de Ko cible et export ZIP groupé.

Ouvrir l'outil→
Générateur Interactif de Dégradés CSS Linéaires et RadiauxDesign

Tous les calculs et conversions sont exécutés exclusivement dans la mémoire de votre navigateur sans aucun transfert.

Ouvrir l'outil→
Générateur d'Ombres CSS Multicouches (Box Shadow)Design

Concevez des ombres portées CSS multicouches réalistes avec élévation optique, biseau intérieur, diffusion de flou et export Tailwind, CSS et React.

Ouvrir l'outil→
Générateur de CSS Clip-Path Polygones & Masques VectorielsDesign

Créez des masques de découpe géométriques réactifs et des balises SVG avec manipulation visuelle des sommets et CSS instantané.

Ouvrir l'outil→
Générateur Visuel de Disposition CSS GridDesign

Outil interactif de conception CSS Grid 2D. Créez des grilles réactives avec unités fr, fonctions minmax(), espacements gap et exportez en CSS, Tailwind ou React JSX.

Ouvrir l'outil→
Générateur de Border-Radius Organique à 8 Valeurs en CSSDesign

Concevez des formes organiques fluides et des squircles à l'aide de la syntaxe complète à 8 valeurs avec barre oblique (/).

Ouvrir l'outil→