Soft Spatial (Estilo "Glass")

✨Prompt Utilizado

UI design for [NOMBRE/TIPO DE APP] using Soft Spatial (Glassmorphism 2.0). The interface consists of floating glass layers over a blurred gradient background of [COLORES DEL GRADIENTE]. Components use heavy background blur (20px to 30px) and 60% transparency. Borders: 1px thin white solid lines with 20% opacity to simulate light reflecting on glass edges. Typography: Light-weight, elegant sans-serif (Outfit). Depth: Multi-layered soft shadows to create a sense of verticality. Atmosphere: Ethereal, premium, calm, and high-tech.

Código HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Soft Spatial Widget</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;600&display=swap" rel="stylesheet">
    <style>
        body { 
            font-family: 'Outfit', sans-serif; 
            background: linear-gradient(135deg, #1e1b4b 0%, #4338ca 100%);
            overflow: hidden;
        }
        .glass-card {
            background: rgba(255, 255, 255, 0.12);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            border: 1px solid rgba(255, 255, 255, 0.25);
            border-radius: 30px;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
        }
        .glow-bar {
            box-shadow: 0 0 20px rgba(255, 255, 255, 0.6);
        }
        /* Esferas decorativas flotando detrás */
        .orb {
            position: absolute;
            border-radius: 50%;
            filter: blur(60px);
            z-index: -1;
            opacity: 0.5;
        }
    </style>
</head>
<body class="flex items-center justify-center min-h-screen p-6 relative">

    <!-- Elementos de fondo para el efecto Glass -->
    <div class="orb w-64 h-64 bg-purple-500 top-1/4 left-1/4 animate-pulse"></div>
    <div class="orb w-80 h-80 bg-blue-400 bottom-1/4 right-1/4" style="animation: bounce 10s infinite"></div>

    <div class="glass-card p-10 max-w-sm w-full flex flex-col gap-7 text-white">
        <div class="flex justify-between items-start">
            <div>
                <p class="text-white/50 text-[10px] font-bold uppercase tracking-[0.3em] mb-1">Métrica En Vivo</p>
                <h3 class="text-5xl font-bold tracking-tighter">11,000 <span class="text-xl font-light opacity-40">pasos</span></h3>
            </div>
            <div class="bg-white/10 p-4 rounded-full border border-white/20">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 16v-2a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2"/><path d="M14 16v-2a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2"/><circle cx="12" cy="5" r="3"/><path d="m7 21 3-5h4l3 5"/></svg>
            </div>
        </div>
        
        <div class="w-full bg-white/10 h-3 rounded-full overflow-hidden border border-white/5">
            <div class="bg-white h-full w-[73%] glow-bar"></div>
        </div>

        <div class="flex justify-between items-center text-[11px] font-medium tracking-widest text-white/60">
            <span>META: 15,000</span>
            <span class="flex items-center gap-1">
                <span class="w-1.5 h-1.5 bg-green-400 rounded-full animate-ping"></span>
                ACTIVO AHORA
            </span>
        </div>
    </div>

</body>
</html>

Detalles

Fecha de creación

22 de febrero de 2026

Categoría

Web

Editar Recurso

Recursos Relacionados

Ver todos

Editorial Neobrutalism

UI design for [NOMBRE/TIPO DE APP] following Editorial Neobrutalism. Visual rule...

Tactile Maximalism

UI design for [NOMBRE/TIPO DE APP] in Tactile Maximalism style. Elements must ha...

Modern Organic Bento

High-fidelity UI design for a [NOMBRE/TIPO DE APP] using a Modern Organic Bento ...