Glassmorphism Generator

Create modern frosted glass effects

Glassmorphic Card

Sample content to demonstrate the effect

User Name
@username
🎵
Song Title
Artist Name
16px
25%
180%
30%
1px
16px

Generated CSS Code

.glass {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Tailwind CSS classes */
.glass-tailwind {
    @apply bg-white bg-opacity-25
    backdrop-blur-[16px]
    saturate-180
    rounded-[16px]
    border-[1px]
    border-white/30;
}

/* Animation for gradient background */
@keyframes gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}