Le glassmorphisme fonctionne mieux avec un arrière-plan coloré ou une image derrière l'élément en verre?

Le glassmorphisme fonctionne mieux avec un arrière-plan coloré ou une image derrière l'élément en verre.

Gardez le flou entre 10-20px pour le look classique de verre givré — trop de flou perd l'effet?

Gardez le flou entre 10-20px pour le look classique de verre givré — trop de flou perd l'effet.

Testez sur Safari — backdrop-filter nécessite le préfixe -webkit- pour une compatibilité complète.

Créez des effets UI en verre dépoli avec flou, transparence et contrôles backdrop-filter

Créez des effets de verre givré avec flou, transparence et contrôles backdrop-filter — générez du CSS prêt pour la production dans votre navigateur.

1Ajustez le niveau de flou pour contrôler l'aspect givré de l'effet verre.
2Réglez l'opacité et l'opacité de la bordure de la couche de verre.
3Choisissez une couleur d'arrière-plan et ajustez la saturation pour la teinte du verre.
4Prévisualisez l'effet sur une carte d'exemple avec un arrière-plan coloré.
5Copiez le CSS généré et appliquez-le à vos éléments.

Le glassmorphisme fonctionne mieux avec un arrière-plan coloré ou une image derrière l'élément en verre.
Gardez le flou entre 10-20px pour le look classique de verre givré — trop de flou perd l'effet.
Testez sur Safari — backdrop-filter nécessite le préfixe -webkit- pour une compatibilité complète.

Gratuit : contrôles de base. Starter+ : fonctionnalités premium.

Équipe OneKitToolsMise à jour 2.21.4