Créer des Effets de Glassmorphisme en CSS

Le glassmorphisme crée de beaux effets de verre dépoli. Voici comment l'implémenter correctement.

L'Effet Principal

L'effet de verre repose sur trois propriétés CSS :

.glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

Comprendre Chaque Propriété

Transparence de l'Arrière-plan

Utilisez RGBA ou HSLA avec de faibles valeurs alpha. 0.05 à 0.2 fonctionne le mieux.

Backdrop Filter

La fonction blur() crée l'effet dépoli. Des valeurs entre 8px et 20px sont les plus courantes.

Bordure

Une bordure subtile ajoute de la définition. Utilisez du blanc avec une faible opacité pour le mode clair, ajustez pour le mode sombre.

Variation Mode Sombre

.dark .glass-card {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

Ajouter de la Profondeur

Superposez plusieurs éléments de verre pour la profondeur :

.glass-primary { backdrop-filter: blur(20px); }
.glass-secondary { backdrop-filter: blur(10px); }
.glass-subtle { backdrop-filter: blur(5px); }

Support Navigateur

Backdrop-filter a un bon support mais nécessite une solution de repli :

@supports not (backdrop-filter: blur(10px)) {
  .glass-card {
    background: rgba(255, 255, 255, 0.9);
  }
}

Considérations de Performance

Backdrop-filter peut être coûteux. Utilisez avec parcimonie et testez sur des appareils moins puissants.

Conclusion

Le glassmorphisme est élégant lorsqu'il est utilisé de manière réfléchie. Associez-le à des mises en page épurées et des arrière-plans de qualité pour un impact maximal.