🔧

Générateur Glassmorphism

Générateurs & Design · Outil en ligne gratuit

Générer du CSS d'effet verre dépoli (flou + transparence).

Équipe CoderNewbieDernière mise à jour : 2026-09-20

Fonctionnalités

Blur12px

Background opacity60%

Border opacity30%

Border radius16px

Shadow spread20px

Border

Aperçu

Glass

Code CSS

.glass {
  background: #ffffff99;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid #ffffff4d;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

backdrop-filter

Inclut les préfixes standard et -webkit- pour un support complet des navigateurs.

Alpha HEX

L'opacité se convertit automatiquement en canal alpha HEX pour un CSS propre.

Arrière-plan vibrant

L'aperçu se situe sur un dégradé coloré pour montrer l'effet.

Comment utiliser Générateur Glassmorphism

1Configure the generator settings (colors, size, format, etc.).
2Enter any required input text or data.
3Click generate to create the output.
4Download or copy the generated result.

Fonctionnalités

✓100% gratuit — sans inscription, sans abonnement, sans publicité
✓Fonctionne entièrement dans votre navigateur — vos données ne quittent jamais votre appareil
✓Rapide et léger — résultats instantanés
✓Multiplateforme — compatible ordinateur, tablette et mobile