Tu web, tu impacto QUIERO MI WEB

Andrés Tobío Fullstack/AI INSTAGRAM

Noelia Bonifacio Social Media INSTAGRAM

ElSaltoWeb Creatividad Digital INSTAGRAM

Slider Moderno CSS - Guía Completa

Cómo crear un efecto slider moderno con CSS

Animaciones UI/UX de alto impacto para tu landing page

Introducción

¿Buscas un efecto visual que eleve tu landing page al siguiente nivel y deje a tus visitantes con la boca abierta? Hoy te traigo una solución sencilla y potente: un slider moderno con animaciones CSS avanzadas inspirado en el estilo de las mejores agencias digitales de 2025.

Este efecto combina gradientes dinámicos, animaciones suaves y un diseño glassmorphism para lograr una experiencia UI/UX espectacular y profesional, sin depender de librerías externas.

¿Por qué este slider es diferente?

En este artículo, te explico cómo implementar este efecto paso a paso, cómo adaptarlo para tu propio proyecto, y por qué es ideal para captar la atención de tus futuros clientes.

¿Qué es un slider animado moderno en CSS?

Un slider animado es un componente web que muestra distintas secciones o mensajes de manera cíclica, utilizando transiciones suaves y efectos visuales atractivos.

Los sliders tradicionales a menudo se sienten "viejos" o sobrecargados, pero con las técnicas actuales de CSS y un toque de creatividad puedes crear algo realmente memorable:

🌊

Animaciones de entrada/salida fluidas
🎨

Transiciones de color (hue-rotate, gradientes)
🪟

Elementos superpuestos (shutters, backgrounds, glass)
✨

Efecto glassmorphism y colores neón

💫

Primera Impresión

Mejora la primera impresión de tu web

🏢

Branding

Refuerza la percepción de innovación

🎯

Detalle

Demuestra enfoque en cada detalle

¿Cómo funciona el efecto? Estructura básica

El efecto slider que presentamos utiliza HTML y CSS puro, evitando JavaScript para mantener el rendimiento óptimo y la máxima compatibilidad.

📦 Contenedor Principal

.untitled

El elemento raíz que contiene todo el slider y maneja las animaciones globales de color.

🎬 Área de Slides

.untitled__slides

Contiene todos los slides individuales y define el fondo base con gradientes modernos.

🖼️ Slides Individuales

.untitled__slide

Cada slide con su propio fondo animado y contenido personalizable.

🚪 Overlay Shutter

.untitled__shutters

Elemento animado tipo "persiana" que aporta profundidad visual y efectos glassmorphism.

Ventaja Clave: Rendimiento Optimizado

Al usar solo CSS y HTML, eliminamos dependencias de JavaScript, lo que resulta en carga ultrarrápida y compatibilidad universal con todos los navegadores modernos.

HTML

				
					<div class="untitled">
  <div class="untitled__slides">

    <!-- Slide 1: Propuesta de valor -->
    <div class="untitled__slide">
      <div class="untitled__slideBg"></div>
      <div class="untitled__slideContent">
        <span>Tu web,</span>
        <span>tu impacto</span>
        <a class="button" href="#contacto">QUIERO MI WEB</a>
      </div>
    </div>

    <!-- Slide 2: Andrés Tobío -->
    <div class="untitled__slide">
      <div class="untitled__slideBg"></div>
      <div class="untitled__slideContent">
        <span>Andrés Tobío</span>
        <span>Fullstack/AI</span>
        <a class="button" href="https://www.instagram.com/andresinio2019/" target="_blank">INSTAGRAM</a>
      </div>
    </div>

    <!-- Slide 3: Noelia Bonifacio -->
    <div class="untitled__slide">
      <div class="untitled__slideBg"></div>
      <div class="untitled__slideContent">
        <span>Noelia Bonifacio</span>
        <span>Social Media</span>
        <a class="button" href="https://www.instagram.com/noe_boni/" target="_blank">INSTAGRAM</a>
      </div>
    </div>

    <!-- Slide 4: Branding del estudio -->
    <div class="untitled__slide">
      <div class="untitled__slideBg"></div>
      <div class="untitled__slideContent">
        <span>ElSaltoWeb</span>
        <span>Creatividad Digital</span>
        <a class="button" href="https://www.instagram.com/elsaltoweb/" target="_blank">INSTAGRAM</a>
      </div>
    </div>

  </div>
  <div class="untitled__shutters"></div>
</div>

CSS

				
					.untitled {
  position: absolute;
  height: 100%;
  width: 100%;
  /* Conserva la animación */
  animation: rotateHue infinite 20s linear;
  animation-delay: 0.625s;
}

/* Animación de hue se mantiene igual */
@keyframes rotateHue {
  0%, 20% { filter: hue-rotate(0deg); }
  25%, 45% { filter: hue-rotate(90deg); }
  50%, 70% { filter: hue-rotate(180deg); }
  75%, 95% { filter: hue-rotate(270deg); }
  100% { filter: hue-rotate(360deg); }
}

.untitled__shutters {
  position: absolute;
  height: 100vmax;
  width: 150vmax;
  left: calc(50% - 75vmax);
  top: calc(50% - 75vmax);
  pointer-events: none;
  z-index: 2;
  animation: rotateFrame 10s linear infinite;
}

@keyframes rotateFrame {
  0% { transform: rotate(0deg);}
  100% { transform: rotate(180deg);}
}

/* MODERNO: Shutter BG ahora es gradiente glassmorphism */
.untitled__shutters:before, .untitled__shutters:after {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  background: linear-gradient(135deg, #8f5cff 0%, #45f7ca 100%);
  opacity: 0.93;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.12);
  border-radius: 2rem;
  backdrop-filter: blur(14px);
  pointer-events: auto;
}

.untitled__shutters:before {
  bottom: 50%;
  animation: openTop 5s infinite;
}
@keyframes openTop {
  0% { transform: translate3d(-50%, 0, 0);}
  40%, 70% { transform: translate3d(-50%, -65vmax, 0);}
  100% { transform: translate3d(-50%, 0, 0);}
}

.untitled__shutters:after {
  top: 50%;
  animation: openBottom 5s infinite;
}
@keyframes openBottom {
  0% { transform: translate3d(-50%, 0, 0);}
  40%, 70% { transform: translate3d(-50%, 65vmax, 0);}
  100% { transform: translate3d(-50%, 0, 0);}
}

/* SLIDES */
.untitled__slides {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  /* Cambia a gradiente ultra moderno */
  background: linear-gradient(120deg, #22223b 0%, #228be6 55%, #f15bb5 100%);
}

/* Cambia color del slide para modern glass effect */
.untitled__slideBg {
  position: relative;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(110deg, #8f5cff 0%, #45f7ca 40%, #f15bb5 100%);
  background-blend-mode: soft-light;
  opacity: 1;
  z-index: -1;
  animation: bgInOut 5s infinite;
}
@keyframes bgInOut {
  0% { transform: rotate(-45deg) scale(1.1);}
  33%, 50%, 66% { transform: rotate(0deg);}
  100% { transform: rotate(45deg) scale(0.9);}
}

.untitled__slideContent {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  color: #f8f8f8;
  font-family: "Abril Fatface", sans-serif;
  line-height: 0.8;
  letter-spacing: -0.025em;
  z-index: 2;
  opacity: 1;
  text-shadow: 0 0 0.5em rgba(143, 92, 255, 0.18), 0 1px 12px rgba(34,34,59,0.12);
  mix-blend-mode: lighten;
}
.untitled__slideContent span {
  display: block;
  font-size: 15vmin;
  background: linear-gradient(90deg, #8f5cff, #45f7ca, #f15bb5, #228be6 90%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.button {
  font-family: "Roboto Mono", sans-serif;
  text-decoration: none;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 2vmin;
  display: inline-block;
  position: relative;
  border: 2.5px solid #fff;
  box-shadow: -0.5vmin 0.5vmin 0 rgba(143, 92, 255, 0.19);
  background: rgba(255,255,255,0.08);
  margin-top: 5vmin;
  mix-blend-mode: lighten;
  color: #fff;
  padding: 2vmin 2vmin 1.8vmin 2vmin;
  letter-spacing: 0.12em;
  text-shadow: none;
  line-height: 1;
  transform: translate3d(0.5vmin, -0.5vmin, 0);
  border-radius: 0.9em;
  transition: all 120ms cubic-bezier(0.19, 1, 0.22, 1);
}
.button:hover {
  background: linear-gradient(90deg, #f15bb5 0%, #8f5cff 100%);
  color: #22223b;
  box-shadow: -1vmin 1vmin 0 rgba(34, 139, 230, 0.18);
  transform: translate3d(1vmin, -1vmin, 0) scale(1.05);
}
.button:active {
  background: #f8f8f8;
  color: #22223b;
  box-shadow: 0 0 0 transparent;
  transform: translate3d(0, 0, 0) scale(0.98);
}

@-webkit-keyframes rotateHue {
  0% {
    filter: hue-rotate(0deg);
  }
  20% {
    filter: hue-rotate(0deg);
  }
  25% {
    filter: hue-rotate(90deg);
  }
  45% {
    filter: hue-rotate(90deg);
  }
  50% {
    filter: hue-rotate(180deg);
  }
  70% {
    filter: hue-rotate(180deg);
  }
  75% {
    filter: hue-rotate(270deg);
  }
  95% {
    filter: hue-rotate(270deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}
@keyframes rotateHue {
  0% {
    filter: hue-rotate(0deg);
  }
  20% {
    filter: hue-rotate(0deg);
  }
  25% {
    filter: hue-rotate(90deg);
  }
  45% {
    filter: hue-rotate(90deg);
  }
  50% {
    filter: hue-rotate(180deg);
  }
  70% {
    filter: hue-rotate(180deg);
  }
  75% {
    filter: hue-rotate(270deg);
  }
  95% {
    filter: hue-rotate(270deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}
.untitled__shutters {
  position: absolute;
  height: 100vmax;
  width: 150vmax;
  left: calc(50% - 75vmax);
  top: calc(50% - 75vmax);
  pointer-events: none;
  z-index: 2;
  -webkit-animation: rotateFrame 10s linear infinite;
          animation: rotateFrame 10s linear infinite;
}
@-webkit-keyframes rotateFrame {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(180deg);
  }
}
@keyframes rotateFrame {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(180deg);
  }
}
.untitled__shutters:before, .untitled__shutters:after {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  background-color: #b3401a;
  pointer-events: auto;
}
.untitled__shutters:before {
  bottom: 50%;
  -webkit-animation: openTop 5s infinite;
          animation: openTop 5s infinite;
}
@-webkit-keyframes openTop {
  0% {
    transform: translate3d(-50%, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.8, 0, 0.1, 1);
            animation-timing-function: cubic-bezier(0.8, 0, 0.1, 1);
  }
  40% {
    transform: translate3d(-50%, -65vmax, 0);
    animation-timing-functon: cubic-bezier(0.6, 0.04, 0.98, 0.335);
  }
  70% {
    transform: translate3d(-50%, -65vmax, 0);
    animation-timing-functon: cubic-bezier(0.6, 0.04, 0.98, 0.335);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.335);
            animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.335);
  }
}
@keyframes openTop {
  0% {
    transform: translate3d(-50%, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.8, 0, 0.1, 1);
            animation-timing-function: cubic-bezier(0.8, 0, 0.1, 1);
  }
  40% {
    transform: translate3d(-50%, -65vmax, 0);
    animation-timing-functon: cubic-bezier(0.6, 0.04, 0.98, 0.335);
  }
  70% {
    transform: translate3d(-50%, -65vmax, 0);
    animation-timing-functon: cubic-bezier(0.6, 0.04, 0.98, 0.335);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.335);
            animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.335);
  }
}
.untitled__shutters:after {
  top: 50%;
  -webkit-animation: openBottom 5s infinite;
          animation: openBottom 5s infinite;
}
@-webkit-keyframes openBottom {
  0% {
    transform: translate3d(-50%, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.8, 0, 0.1, 1);
            animation-timing-function: cubic-bezier(0.8, 0, 0.1, 1);
  }
  40% {
    transform: translate3d(-50%, 65vmax, 0);
    animation-timing-functon: cubic-bezier(0.6, 0.04, 0.98, 0.335);
  }
  70% {
    transform: translate3d(-50%, 65vmax, 0);
    animation-timing-functon: cubic-bezier(0.6, 0.04, 0.98, 0.335);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.335);
            animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.335);
  }
}
@keyframes openBottom {
  0% {
    transform: translate3d(-50%, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.8, 0, 0.1, 1);
            animation-timing-function: cubic-bezier(0.8, 0, 0.1, 1);
  }
  40% {
    transform: translate3d(-50%, 65vmax, 0);
    animation-timing-functon: cubic-bezier(0.6, 0.04, 0.98, 0.335);
  }
  70% {
    transform: translate3d(-50%, 65vmax, 0);
    animation-timing-functon: cubic-bezier(0.6, 0.04, 0.98, 0.335);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.335);
            animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.335);
  }
}
.untitled__slides {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background-color: #b3401a;
}
.untitled__slide {
  position: absolute;
  height: 100%;
  width: 100%;
  opacity: 0;
  -webkit-animation: showHideSlide infinite 20s steps(1);
          animation: showHideSlide infinite 20s steps(1);
}
@-webkit-keyframes showHideSlide {
  0% {
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
  }
  25% {
    opacity: 0;
    pointer-events: none;
    z-index: -1;
  }
  100% {
    opacity: 0;
    pointer-events: none;
    z-index: -1;
  }
}
@keyframes showHideSlide {
  0% {
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
  }
  25% {
    opacity: 0;
    pointer-events: none;
    z-index: -1;
  }
  100% {
    opacity: 0;
    pointer-events: none;
    z-index: -1;
  }
}
.untitled__slide:nth-child(1) {
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}

.untitled__slide:nth-child(2) {
  -webkit-animation-delay: 5s;
          animation-delay: 5s;
}

.untitled__slide:nth-child(3) {
  -webkit-animation-delay: 10s;
          animation-delay: 10s;
}

.untitled__slide:nth-child(4) {
  -webkit-animation-delay: 15s;
          animation-delay: 15s;
}

.untitled__slideBg {
  position: relative;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background-size: cover;
  background-position: center;
  background-color: #b3401a;
  background-blend-mode: hard-light;
  opacity: 1;
  z-index: -1;
  -webkit-animation: bgInOut 5s infinite;
          animation: bgInOut 5s infinite;
}
@-webkit-keyframes bgInOut {
  0% {
    transform: rotate(-45deg) scale(1.1);
    -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
            animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  }
  33% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(0deg);
  }
  66% {
    transform: rotate(0deg);
    -webkit-animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
            animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
  }
  100% {
    transform: rotate(45deg) scale(0.9);
  }
}
@keyframes bgInOut {
  0% {
    transform: rotate(-45deg) scale(1.1);
    -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
            animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  }
  33% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(0deg);
  }
  66% {
    transform: rotate(0deg);
    -webkit-animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
            animation-timing-function: cubic-bezier(0.895, 0.03, 0.685, 0.22);
  }
  100% {
    transform: rotate(45deg) scale(0.9);
  }
}
.untitled__slideContent {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  color: white;
  font-family: "Abril Fatface", sans-serif;
  line-height: 0.8;
  letter-spacing: -0.025em;
  z-index: 2;
  opacity: 1;
  text-shadow: 0 0 0.5em rgba(179, 64, 26, 0.25);
  mix-blend-mode: lighten;
}
.untitled__slideContent span {
  display: block;
  font-size: 15vmin;
}

.button {
  font-family: "Roboto Mono", sans-serif;
  text-decoration: none;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 2vmin;
  display: inline-block;
  position: relative;
  border: 3px solid white;
  box-shadow: -0.5vmin 0.5vmin 0 rgba(255, 255, 255, 0.5);
  background: transparent;
  margin-top: 5vmin;
  mix-blend-mode: lighten;
  color: white;
  padding: 2vmin 2vmin 1.8vmin 2vmin;
  letter-spacing: 0.1em;
  text-shadow: none;
  line-height: 1;
  transform: translate3d(0.5vmin, -0.5vmin, 0);
  transition: all 100ms linear;
}
.button:hover {
  transform: translate3d(1vmin, -1vmin, 0);
  box-shadow: -1vmin 1vmin 0 rgba(255, 255, 255, 0.5);
  background: white;
  color: black;
}
.button:active {
  transform: translate3d(0px, 0px, 0);
  box-shadow: 0px 0px 0 rgba(255, 255, 255, 0.5);
}

Agentes de IA con LangChain

Agentes de IA con LangChain: arquitectura, seguridad y resultados

Efecto de estrellas detrás de tu ratón

210

¿Te fascina el cielo estrellado? 🌌🌠 Explora este proyecto "Star Trails with Options" y personaliza la magia del firmamento. 💫🔧

Slider responsivo solo HTML y CSS

224

Slider totalmente personalizado que hemos creado utilizando solo HTML y CSS.

NBA LEGENDS

129

Leyendas de la NBA: Quiénes son los GOATs de la Historia

🔍 Analiza tu web con Inteligencia Artificial – Gratis y al instante

445

¿Tu sitio está optimizado? Descúbrelo en segundos con nuestra herramienta de IA y recibe un informe de UX

Creando un Efecto de Rastro de Imágenes en tu Sitio Web

453

En este tutorial, te guiaré a través del código HTML y JavaScript para implementar este efecto sorprendente en tu propio

Cargar más