HTML5 CSS3

Interactive Glass Card - Glassmorphism 3D

Interactive card featuring a frosted glass effect (Glassmorphism), a smooth floating animation, dynamic reflections, and 3D transformations on hover. Built exclusively with modern HTML and CSS, using background blur, gradients, and fluid transitions to create an elegant and visually appealing interface.

Live Preview

Source Code

Copy this code and use it in your projects.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interactive Glass Card</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="float-container">
        <div class="glass-card">

            <span class="badge">✨ Glassmorphism</span>

            <h1>Interactive Glass Card</h1>

            <p>
                A modern frosted glass effect combined with smooth
                floating animations, 3D depth, and dynamic reflections.
                Built entirely with HTML and CSS to create an elegant
                and immersive user experience.
            </p>

            <div class="buttons">
                <a href="#" class="btn">Explore</a>
                <a href="#" class="btn">Learn More</a>
            </div>

        </div>
    </div>

</body>
</html>

CSS

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Inter,sans-serif;
}

:root{
    --glass-bg:rgba(255,255,255,.08);
    --glass-border:rgba(255,255,255,.18);
    --text:#fff;
}

body{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
    background:
    radial-gradient(circle at 20% 20%, #00c6ff 0%, transparent 40%),
    radial-gradient(circle at 80% 80%, #ff006e 0%, transparent 40%),
    linear-gradient(135deg,#0f172a,#1e293b);
}

body::before,
body::after{
    content:"";
    position:absolute;
    border-radius:50%;
    filter:blur(100px);
    z-index:-1;
}

body::before{
    width:300px;
    height:300px;
    background:#00ffff;
    top:-100px;
    left:-100px;
}

body::after{
    width:350px;
    height:350px;
    background:#ff00ff;
    bottom:-120px;
    right:-120px;
}

.float-container{
    animation:float 5s ease-in-out infinite;
    will-change:transform;
}

.glass-card{
    position:relative;
    width:380px;
    padding:35px;
    border-radius:24px;
    background:var(--glass-bg);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border:1px solid var(--glass-border);
    box-shadow:
    0 8px 32px rgba(0,0,0,.3),
    inset 0 1px 1px rgba(255,255,255,.2);
    overflow:hidden;
    color:var(--text);
    transition:
    transform .4s ease,
    box-shadow .4s ease;
    transform-style:preserve-3d;
    will-change:transform;
}

.glass-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:
    linear-gradient(
        120deg,
        transparent 20%,
        rgba(255,255,255,.35) 50%,
        transparent 80%
    );
    transform:translateX(-200%);
    transition:transform .8s ease;
}

.glass-card:hover::before{
    transform:translateX(250%);
}

.glass-card:hover{
    transform:
    perspective(1000px)
    rotateX(8deg)
    rotateY(-8deg)
    scale(1.04);
    box-shadow:
    0 25px 60px rgba(0,0,0,.4),
    0 0 30px rgba(255,255,255,.1);
}

.badge{
    display:inline-block;
    padding:8px 14px;
    border-radius:999px;
    background:rgba(255,255,255,.1);
    border:1px solid rgba(255,255,255,.15);
    margin-bottom:20px;
    font-size:.85rem;
}

h1{
    font-size:2rem;
    margin-bottom:15px;
}

p{
    opacity:.9;
    line-height:1.7;
    margin-bottom:25px;
}

.buttons{
    display:flex;
    gap:12px;
}

.btn{
    text-decoration:none;
    color:#fff;
    padding:12px 20px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.15);
    transition:.3s;
}

.btn:hover{
    transform:translateY(-3px);
    background:rgba(255,255,255,.12);
}

@keyframes float{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-15px);
    }
}

@media(max-width:450px){
    .glass-card{
        width:90%;
        padding:25px;
    }

    h1{
        font-size:1.6rem;
    }
}