Convertisseur Gratuit
CSS Glassmorphism Générateur
Créez des effets de cartes glassmorphism époustouflants avec aperçu en temps réel.
Aperçu
Glassmorphism Card
Beautiful frosted glass effect with customizable settings.
Learn MoreCouleur de fond
#FFFFFF
Opacité du fond15%
0%50%100%
Quantité de flou16px
0px20px40px
Couleur de bordure
#FFFFFF
Opacité de la bordure20%
0%50%100%
Rayon de la bordure20px
0px30px60px
Intensité de l'ombre30%
0%40%80%
CSS généré
.glass-card {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.20);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.30);
padding: 2rem;
}