Galería de Fondos para Body

Gradient Mesh

Fondo con orbes de gradiente animados

Animated Gradient Mesh

Fondo con gradientes suaves que se mueven creando un efecto mesh dinámico

HTML

CSS

<body>
    <div class="bg-gradient-mesh">
        <div class="gradient-orb"></div>
    </div>
    
    <!-- Tu contenido aquí -->
    <div class="content">
        <!-- Contenido de tu página -->
    </div>
</body>

body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
}

.bg-gradient-mesh {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0a0a0a;
    overflow: hidden;
    z-index: -1;
}

.bg-gradient-mesh::before,
.bg-gradient-mesh::after,
.gradient-orb {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.6;
    animation: float-orb 20s ease-in-out infinite;
}

.bg-gradient-mesh::before {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, #667eea 0%, transparent 70%);
    top: -300px;
    left: -300px;
    animation-duration: 25s;
}

.bg-gradient-mesh::after {
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, #764ba2 0%, transparent 70%);
    bottom: -400px;
    right: -400px;
    animation-duration: 30s;
    animation-delay: -5s;
}

.gradient-orb {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, #f093fb 0%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-duration: 35s;
    animation-delay: -10s;
}

@keyframes float-orb {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    25% {
        transform: translate(100px, -100px) scale(1.1);
    }
    50% {
        transform: translate(-100px, 100px) scale(0.9);
    }
    75% {
        transform: translate(50px, 50px) scale(1.05);
    }
}

.content {
    position: relative;
    z-index: 1;
    /* Tu contenido con z-index superior al fondo */
}

Stars Field

Campo de estrellas animado con estrellas fugaces

Animated Stars Field

Fondo espacial con estrellas parpadeantes, estrellas fugaces y nebulosas

HTML

CSS

<body>
    <div class="bg-stars-field">
        <div class="stars-layer">
            <!-- Las estrellas se generan dinámicamente con CSS -->
            <div class="star" style="top: 10%; left: 20%; width: 2px; height: 2px; animation-delay: 0s;"></div>
            <div class="star" style="top: 30%; left: 50%; width: 3px; height: 3px; animation-delay: 1s;"></div>
            <div class="star" style="top: 60%; left: 80%; width: 2px; height: 2px; animation-delay: 2s;"></div>
            <!-- Añade más estrellas según necesites -->
        </div>
        
        <div class="shooting-star" style="top: 20%; left: -100px; animation-delay: 0s;"></div>
        <div class="shooting-star" style="top: 50%; left: -100px; animation-delay: 5s;"></div>
        
        <div class="nebula" style="top: 10%; right: 10%;"></div>
        <div class="nebula" style="bottom: 20%; left: 5%;"></div>
    </div>
    
    <!-- Tu contenido aquí -->
    <div class="content">
        <!-- Contenido de tu página -->
    </div>
</body>

body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
}

.bg-stars-field {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, #1a1a2e 0%, #0a0a0a 100%);
    overflow: hidden;
    z-index: -1;
}

.stars-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.star {
    position: absolute;
    background: white;
    border-radius: 50%;
    animation: twinkle 3s ease-in-out infinite;
}

@keyframes twinkle {
    0%, 100% {
        opacity: 0;
        transform: scale(0.5);
    }
    50% {
        opacity: 1;
        transform: scale(1);
    }
}

.shooting-star {
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.8);
    animation: shoot 3s linear infinite;
    opacity: 0;
}

.shooting-star::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 2px;
    background: linear-gradient(90deg, 
                transparent, 
                rgba(255, 255, 255, 0.8), 
                white);
    transform: translateX(-100px);
}

@keyframes shoot {
    0% {
        transform: translate(0, 0) rotate(-45deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translate(600px, 600px) rotate(-45deg);
        opacity: 0;
    }
}

.nebula {
    position: absolute;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, 
                rgba(102, 126, 234, 0.3) 0%, 
                transparent 70%);
    filter: blur(40px);
    animation: drift 40s ease-in-out infinite;
}

@keyframes drift {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    33% {
        transform: translate(100px, -50px) rotate(120deg);
    }
    66% {
        transform: translate(-50px, 100px) rotate(240deg);
    }
}

.content {
    position: relative;
    z-index: 1;
    /* Tu contenido con z-index superior al fondo */
}