Código HTML CSS con efecto de vidrio líquido

785 codex

Abrir en el editor Publica tu código

Código HTML CSS con efecto de vidrio líquido

Recomendado

22 March 2025

formulario de suscripción al boletín informativo

3 June 2025

Reproductor de vídeo brutalista

15 January 2026

Conceptos básicos de Baldi remasterizados: Cargador de juegos WebGL

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Liquid Glass Effect</title>
    <style>
        :root {
            --bg-color: #0f172a;
            --glass-bg: rgba(255, 255, 255, 0.05);
            --glass-border: rgba(255, 255, 255, 0.15);
            --accent-1: #38bdf8;
            --accent-2: #818cf8;
            --accent-3: #c084fc;
        }

body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            background-color: var(--bg-color);
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }

/* Animated Liquid Background */
        .liquid-container {
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 0;
            filter: blur(80px);
        }

.blob {
            position: absolute;
            border-radius: 50%;
            opacity: 0.6;
            animation: move 20s infinite alternate ease-in-out;
        }

.blob-1 {
            width: 500px;
            height: 500px;
            background: var(--accent-1);
            top: -10%;
            left: -10%;
            animation-duration: 25s;
        }

.blob-2 {
            width: 600px;
            height: 600px;
            background: var(--accent-2);
            bottom: -20%;
            right: -10%;
            animation-duration: 30s;
            animation-delay: -5s;
        }

.blob-3 {
            width: 400px;
            height: 400px;
            background: var(--accent-3);
            top: 40%;
            left: 30%;
            animation-duration: 20s;
            animation-delay: -10s;
        }

@keyframes move {
            from { transform: translate(0, 0) scale(1); }
            to { transform: translate(100px, 50px) scale(1.2); }
        }

/* Glass Card */
        .glass-card {
            position: relative;
            z-index: 1;
            width: 400px;
            padding: 40px;
            background: var(--glass-bg);
            backdrop-filter: blur(20px) saturate(160%);
            -webkit-backdrop-filter: blur(20px) saturate(160%);
            border: 1px solid var(--glass-border);
            border-radius: 24px;
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
            color: white;
            text-align: center;
        }

.glass-card h1 {
            margin: 0 0 15px 0;
            font-size: 2.5rem;
            font-weight: 700;
            background: linear-gradient(to right, #fff, #cbd5e1);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

.glass-card p {
            line-height: 1.6;
            color: rgba(255, 255, 255, 0.8);
            margin-bottom: 30px;
        }

.glass-button {
            padding: 12px 30px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 12px;
            color: white;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s ease;
            cursor: pointer;
        }

.glass-button:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }

/* Reflection effect */
        .glass-card::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 50%;
            background: linear-gradient(
                to bottom,
                rgba(255, 255, 255, 0.1) 0%,
                rgba(255, 255, 255, 0) 100%
            );
            border-radius: 24px 24px 0 0;
            pointer-events: none;
        }
    </style>
</head>
<body>

<div class="glass-card">
        <h1>Liquid Glass</h1>
        <p>A sophisticated interface blending fluid organic shapes with frosted refractive elements. Experience the clarity of modern design.</p>
        <a href="#" class="glass-button">Explore Fluidity</a>
    </div>

</body>
</html>

CSS