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

593 codex

Abrir en el editor Publica tu código

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

Recomendado

28 December 2025

Carga del sitio + barra de progreso

4 December 2025

Animación CSS con efecto de vidrio HTML

12 June 2025

Un código de Metehan

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