Design

Générateur de glassmorphisme

Créez un effet verre dépoli en CSS avec flou, transparence, teinte et aperçu en direct Fonctionne sur votre appareil — rien n'est envoyé, rien n'est stocké.

Flou12px

Transparence20%

Saturation120%

Rayon de bordure16px

Épaisseur de bordure1px

Opacité de bordure40%

Couleur de teinte

#ffffff

Arrière-plan

Aperçu

Glassmorphisme

Sortie CSS

/* Glassmorphism */
background: rgba(255, 255, 255, 0.20);
border-radius: 16px;
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.18);
-webkit-backdrop-filter: blur(12px) saturate(120%);
backdrop-filter: blur(12px) saturate(120%);
border: 1px solid rgba(255, 255, 255, 0.40);

/* Fallback for browsers without backdrop-filter support */
@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
  background: rgba(255, 255, 255, 0.60);
}

Associés

Générateur de clip-path CSSDesign Éditeur de courbe Cubic-BezierDesign Générateur de blob SVGDesign

À propos de l'outil Générateur de glassmorphisme

Créez un effet verre dépoli en CSS avec flou, transparence, teinte et aperçu en direct

Générateur de glassmorphisme est un outil gratuit de la catégorie Design et visuel sur BrowseryTools. Il fonctionne entièrement dans votre navigateur : ce que vous lui donnez est traité sur votre propre appareil et n'est jamais envoyé à un serveur, il n'y a ni inscription, ni publicité, ni filigrane, et il continue de fonctionner sans connexion une fois la page chargée.