HTML5 CSS3

Interactive Glass Card - Glassmorphism 3D

Tarjeta interactiva con efecto de cristal esmerilado (Glassmorphism), animación de flotación suave, reflejos dinámicos y transformación 3D al pasar el cursor. Desarrollada únicamente con HTML y CSS modernos, utilizando desenfoque de fondo, gradientes y transiciones fluidas para crear una interfaz elegante y visualmente atractiva.

Previsualización en Vivo

Código Fuente

Copia este código y úsalo en tus proyectos.

HTML

<!DOCTYPE html>
<html lang="es">
<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>
                Efecto de cristal esmerilado combinado con animaciones
                suaves, profundidad 3D y reflejos dinámicos utilizando
                únicamente HTML y CSS.
            </p>

            <div class="buttons">
                <a href="#" class="btn">Explorar</a>
                <a href="#" class="btn">Detalles</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;
    }
}