278 outils gratuits
Outils en ligne
278 outils gratuits, sans inscription ni installation, tout se passe dans votre navigateur.
278 outils gratuits, sans inscription ni installation, tout se passe dans votre navigateur.
Effet verre dépoli (backdrop-filter) avec aperçu
Le glassmorphism, cet effet de verre dépoli popularisé par macOS et iOS, apporte profondeur et élégance aux cartes, barres de navigation et fenêtres modales. Il repose sur la propriété CSS backdrop-filter, qui floute et sature ce qui se trouve derrière l'élément. Ce générateur règle visuellement les cinq paramètres qui comptent : intensité du flou, opacité du fond blanc, saturation, visibilité de la bordure et rayon des coins. L'aperçu se met à jour en direct sur un fond coloré, et le CSS généré inclut le préfixe -webkit- nécessaire à Safari.
Tous les navigateurs récents : Chrome, Edge, Firefox, Safari (avec le préfixe -webkit-, inclus dans le code généré). Prévoyez simplement un fond semi-opaque en repli : sans backdrop-filter, l'élément reste lisible, juste sans le flou.
L'effet floute ce qui est derrière l'élément : sur un fond uni, il n'y a rien à flouter. Placez la carte au-dessus d'une image, d'un dégradé ou d'éléments colorés, et gardez une opacité de fond faible (10 à 40%).