Des couleurs à accorder, un dégradé ou une grille CSS à écrire, une maquette de post à montrer : ces outils rendent un résultat prêt à copier ou à télécharger, sans compte et sans logiciel.
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.
CSS
.glass {
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(12px) saturate(140%);
-webkit-backdrop-filter: blur(12px) saturate(140%);
border: 1px solid rgba(255, 255, 255, 0.30);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}L'effet verre dépoli repose sur backdrop-filter, supporté par tous les navigateurs récents. Fonctionne mieux sur un fond coloré ou une image.
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%).
Un résultat qui vous paraît faux, une valeur périmée, un cas qui manque ? Signalez-le à contact@topapps.fr