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);
}
VER RECURSO
Esta app te permite diseñar y probar agentes de IA que atienden a tus clientes

Agentes de IA para tu e-commerce

344
VER RECURSO
MCP Builder IA es una APK Android para generar conectores MCP orientados a negocio. Permite crear proyectos Node.js, definir tools,

MCP Builder IA: APK Android para generar conectores MCP con inteligencia artificial

403
VER RECURSO
Email Designer: la herramienta gratuita y open source para crear emails que sí funcionan

Email Designer: la herramienta gratuita y open source para crear emails que sí funcionan

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

Efecto de estrellas detrás de tu ratón

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

Slider responsivo solo HTML y CSS

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

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

969
Cargar más

Sobre Mí

Desarrollador full-stack.

Creo experiencias digitales innovadoras y funcionales. Especializado en tecnologías web modernas y diseño centrado en el usuario.

Contacto

  • 📧 atobio459@gmail.com
  • 📍 Valencia, España
  • 💼 Disponible para proyectos

© 2025 ElSaltoweb.es Todos los derechos reservados.

Política de Privacidad Términos de Uso Cookies Mapa del Sitio
Etiquetado , , ,