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

393 codex

Abrir en el editor Publica tu código

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

Recomendado

17 February 2026

Emulador del juego Mortal Kombat 3 HTML5

15 March 2024

Entrada CSS animada

5 June 2025

Un código de sofiane.blida09

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