Générateur de Glassmorphism Créez des effets d'interface utilisateur en verre froissé avec un flou d'arrière-plan, une transparence et des contrôles de saturation.

Le Glassmorphism repose sur la propriété backdrop-filter CSS, en particulier les fonctions blur() et saturate(). backdrop-filter applique des effets à la zone derrière un élément, contrairement au filtre qui affecte l'élément lui-même. L'élément doit avoir un arrière-plan semi-transparent (en utilisant rgba ou hsla) pour que le flou soit visible. La valeur blur() en pixels contrôle l'intensité de l'effet frosted - 10-20px est typique. saturate() au-dessus de 100 % améliore les couleurs visibles à travers le verre. La bordure utilise une version légèrement plus opaque de la couleur d'arrière-plan pour la définition. box-shadow ajoute de la profondeur. Le préfixe -webkit-backdrop-filter est requis pour Safari. Pour la compatibilité descendante, fournissez un arrière-plan plus opaque pour les navigateurs qui ne prennent pas en charge backdrop-filter. Utilisez @supports (backdrop-filter: blur(1px)) pour la détection de fonctionnalité. Note de performances : backdrop-filter peut être coûteux sur les grands éléments ou lors du empilement de plusieurs couches floues.