Codice HTML CSS effetto vetro liquido

26 codex

Apri nell'Editor Video Pubblica il Tuo Codice

Consigliato

11 September 2025

Esempio di blocco di codice di animazione CSS

16 April 2025

Un codice di 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>

Consigliato

Esempio di blocco di codice di animazione CSS

Un codice di Metehan

Un codice di Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS