Générateur Glassmorphism

Génère du CSS Glassmorphism avec contrôles de transparence et flou

Présélections

Blur (px)

Saturation (%)

Background color

Background opacity

Border color

Border opacity

Border radius (px)

Glassmorphism ne fonctionne que lorsque des couleurs et des images sont présentes derrière — l'aperçu est volontairement placé sur un dégradé coloré.

Aperçu glass

backdrop-filter · rgba background

CSS

.glass {
  background: rgba(255, 255, 255, 0.20);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: 12px;
}

Comment utiliser

Cliquez sur un bouton de préréglage (p. ex. Frosted, Tinted, Dark) pour commencer par un style prêt à l'emploi.
Ajustez l'opacité de l'arrière-plan, le rayon de flou, l'opacité de la bordure et la couleur d'arrière-plan à l'aide des contrôles.
Observez l'aperçu de la carte se mettre à jour en direct sur le fond dégradé.
Copiez le CSS généré (backdrop-filter, background, border) et collez-le dans votre projet.

Exemples

Définir le flou à 12px, le fond rgba(255,255,255,0.15), la bordure rgba(255,255,255,0.3) produit un effet de carte en verre dépoli subtil.
Le préréglage Dark applique un fond semi-transparent foncé avec un flou atténué, adapté aux tableaux de bord à thème sombre.

Vérifiez les sorties avant utilisation en production. Aucune garantie — voir Conditions.