Générateur de Glassmorphism

Créez des effets de glassmorphism personnalisés gratuitement. Ajustez le flou, la réfraction, la profondeur et copiez le CSS généré pour l'utiliser dans vos projets.

Preview

Paramètres

9
0.09
9
.glass-card {
  width: 240px;
  height: 360px;
  background: rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(255, 255, 255, 0.1),
    inset 0 0 18px 9px rgba(255, 255, 255, 0.9);
  position: relative;
  overflow: hidden;
}

.glass-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.8),
    transparent
  );
}

.glass-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.8),
    transparent,
    rgba(255, 255, 255, 0.3)
  );
}

Qu'est-ce que le Glassmorphism ?

Le glassmorphism est une tendance de design qui crée des éléments avec un effet de verre translucide et flou, créant une sensation de profondeur et de modernité. Cet effet est populaire dans les interfaces modernes et donne un look élégant à vos projets.

Caractéristiques du Glassmorphism

  • Effet de verre translucide avec flou d'arrière-plan
  • Bordures subtiles et semi-transparentes
  • Crée une sensation de profondeur et de couches
  • Idéal pour les cartes, modales et panneaux modernes
  • Fonctionne bien avec des arrière-plans colorés ou dégradés

Conseils d'Utilisation

  • Ajustez le flou pour contrôler la netteté de l'effet
  • La réfraction contrôle la transparence de l'élément
  • La profondeur ajuste la taille de l'élément
  • Utilisez des arrière-plans colorés pour une meilleure visualisation
  • Combinez avec des ombres pour plus de profondeur