Scrollbars Personalizados con CSS 2025 | Guía Completa scrollbar-color y scrollbar-width

Scrollbars Personalizados con CSS: La Guía Completa 2025

¿Cansado de las barras de desplazamiento predeterminadas del navegador que no encajan con tu diseño web? Con las nuevas propiedades CSS modernas scrollbar-color y scrollbar-width, ahora es más fácil que nunca personalizar las scrollbars de tu sitio web. En esta guía completa, aprenderás todo sobre la personalización de scrollbars con CSS.

¿Por qué personalizar las scrollbars de tu sitio web?

1. Coherencia con el diseño de marca

Las scrollbars predeterminadas pueden chocar con tu identidad visual. Personalizar las barras de desplazamiento te permite:

Mantener la paleta de colores: Integrar los colores de tu marca en cada elemento
Mejorar la estética: Crear una experiencia visual cohesiva
Destacar del resto: Diferenciarte de sitios genéricos
Profesionalismo: Demostrar atención al detalle

2. Mejor experiencia de usuario

Scrollbars bien diseñadas mejoran la usabilidad:

Visibilidad mejorada: Scrollbars más visibles en fondos claros u oscuros
Feedback visual claro: Indicadores de posición más evidentes
Reducción de distracción: Scrollbars sutiles cuando no están en uso
Accesibilidad: Mayor contraste para usuarios con dificultades visuales

3. Adaptación al modo oscuro

Con la popularidad del modo oscuro, las scrollbars estándar pueden verse mal:

Scrollbars claras en interfaces oscuras causan fatiga visual
Personalización permite adaptar automáticamente al tema
Mejora la experiencia en entornos de poca luz

Propiedades CSS modernas para scrollbars

scrollbar-width: Control del grosor

La propiedad scrollbar-width es parte del estándar CSS Scrollbars Module Level 1 y permite controlar el ancho de las scrollbars.

Valores disponibles

css / Valores estándar / .elemento { scrollbar-width: auto; / Ancho predeterminado del navegador / scrollbar-width: thin; / Scrollbar delgada / scrollbar-width: none; / Sin scrollbar visible / }

Casos de uso

auto (predeterminado):

✅ Interfaces tradicionales
✅ Máxima compatibilidad
✅ Accesibilidad garantizada
❌ Puede ocupar mucho espacio

thin:

✅ Diseños minimalistas
✅ Interfaces modernas
✅ Ahorro de espacio
✅ Aspecto elegante
❌ Puede ser difícil de usar en móviles

none:

✅ Carruseles personalizados
✅ Scroll controlado por JavaScript
✅ Máximo espacio de contenido
❌ Problemas de accesibilidad
❌ Usuario puede no saber que hay scroll

scrollbar-color: Personalización de colores

La propiedad scrollbar-color permite definir los colores del thumb (deslizador) y el track (fondo).

Sintaxis

css
.elemento {
  / scrollbar-color:   /
  scrollbar-color: #888888 #f1f1f1;
  
  / Usar auto para valores predeterminados /
  scrollbar-color: auto;
}

Ejemplos prácticos

css
/ Tema claro profesional /
.light-theme {
  scrollbar-color: #888888 #f1f1f1;
}

/ Tema oscuro moderno /
.dark-theme {
  scrollbar-color: #555555 #2a2a2a;
}

/ Scrollbar de marca (azul) /
.brand-scrollbar {
  scrollbar-color: #3b82f6 #dbeafe;
}

/ Scrollbar sutil /
.subtle-scrollbar {
  scrollbar-color: rgba(0,0,0,0.2) transparent;
}

Compatibilidad de navegadores

scrollbar-color & scrollbar-width

Navegador	Versión mínima	Notas
Firefox	64+ (2018)	Soporte completo desde el inicio
Chrome	121+ (2024)	Soporte reciente
Safari	17.4+ (2024)	Soporte muy reciente
Edge	121+ (2024)	Basado en Chromium
Opera	107+ (2024)	Basado en Chromium

⚠️ Importante: Aunque el soporte es reciente en navegadores WebKit, la adopción está creciendo rápidamente.

Estilos WebKit: Personalización avanzada

Para navegadores basados en WebKit (Chrome, Safari, Edge), existen pseudoelementos que permiten personalización mucho más detallada.

Pseudoelementos WebKit disponibles

css
/ Contenedor principal de la scrollbar /
::-webkit-scrollbar {
  width: 12px;  / Ancho para scroll vertical /
  height: 12px; / Alto para scroll horizontal /
}

/ Fondo/riel de la scrollbar /
::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

/ El deslizador/thumb /
::-webkit-scrollbar-thumb {
  background: #888888;
  border-radius: 10px;
}

/ Estado hover del thumb /
::-webkit-scrollbar-thumb:hover {
  background: #555555;
}

/ Esquinas donde se cruzan scrollbars /
::-webkit-scrollbar-corner {
  background: transparent;
}

Ejemplo completo con todas las variantes

css
.custom-scrollbar {
  / Propiedades estándar (Firefox, Chrome 121+, Safari 17.4+) /
  scrollbar-width: thin;
  scrollbar-color: #888888 #f1f1f1;
}

/ Estilos WebKit para mayor control /
.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
  margin: 2px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #888888 0%, #666666 100%);
  border-radius: 10px;
  border: 2px solid #f1f1f1;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #666666 0%, #444444 100%);
}

.custom-scrollbar::-webkit-scrollbar-thumb:active {
  background: #444444;
}

Patrones de diseño populares

1. Scrollbar minimalista moderna

css
.minimal-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.2) transparent;
}

.minimal-scrollbar::-webkit-scrollbar {
  width: 6px;
}

.minimal-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.minimal-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.2);
  border-radius: 3px;
}

.minimal-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.4);
}

Características:

Extremadamente sutil
No distrae del contenido
Ideal para portfolios y galerías

2. Scrollbar con efecto de profundidad

css
.depth-scrollbar {
  scrollbar-width: auto;
  scrollbar-color: #555555 #e0e0e0;
}

.depth-scrollbar::-webkit-scrollbar {
  width: 14px;
}

.depth-scrollbar::-webkit-scrollbar-track {
  background: #e0e0e0;
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
}

.depth-scrollbar::-webkit-scrollbar-thumb {
  background: linear-gradient(45deg, #666666 0%, #444444 100%);
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.depth-scrollbar::-webkit-scrollbar-thumb:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

Características:

Efecto 3D sutil
Mayor visibilidad
Profesional y elegante

3. Scrollbar con degradado de marca

css
.brand-gradient-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #3b82f6 #dbeafe;
}

.brand-gradient-scrollbar::-webkit-scrollbar {
  width: 10px;
}

.brand-gradient-scrollbar::-webkit-scrollbar-track {
  background: linear-gradient(180deg, #dbeafe 0%, #bfdbfe 100%);
  border-radius: 10px;
}

.brand-gradient-scrollbar::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #60a5fa 0%, #3b82f6 50%, #2563eb 100%);
  border-radius: 10px;
}

.brand-gradient-scrollbar::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 50%, #1d4ed8 100%);
}

Características:

Colorido y llamativo
Refuerza la identidad de marca
Ideal para sitios creativos

4. Scrollbar para modo oscuro

css
.dark-mode-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #4a5568 #1a202c;
}

.dark-mode-scrollbar::-webkit-scrollbar {
  width: 8px;
}

.dark-mode-scrollbar::-webkit-scrollbar-track {
  background: #1a202c;
  border-radius: 10px;
}

.dark-mode-scrollbar::-webkit-scrollbar-thumb {
  background: #4a5568;
  border-radius: 10px;
  border: 2px solid #1a202c;
}

.dark-mode-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #718096;
}

Características:

Optimizado para interfaces oscuras
Reduce fatiga visual
Contraste apropiado

Implementación con temas dinámicos

Usando CSS Variables

css
:root {
  / Tema claro /
  --scrollbar-thumb: #888888;
  --scrollbar-track: #f1f1f1;
  --scrollbar-thumb-hover: #555555;
}

[data-theme="dark"] {
  / Tema oscuro /
  --scrollbar-thumb: #4a5568;
  --scrollbar-track: #1a202c;
  --scrollbar-thumb-hover: #718096;
}

.adaptive-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

.adaptive-scrollbar::-webkit-scrollbar {
  width: 8px;
}

.adaptive-scrollbar::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: 10px;
}

.adaptive-scrollbar::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 10px;
}

.adaptive-scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

Con Tailwind CSS

javascript
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'scrollbar-thumb': '#888888',
        'scrollbar-track': '#f1f1f1',
      }
    }
  },
  plugins: [
    function({ addUtilities }) {
      const newUtilities = {
        '.scrollbar-thin': {
          'scrollbar-width': 'thin',
          'scrollbar-color': '#888888 #f1f1f1',
        },
        '.scrollbar-thin::-webkit-scrollbar': {
          width: '8px',
        },
        '.scrollbar-thin::-webkit-scrollbar-track': {
          background: '#f1f1f1',
          'border-radius': '10px',
        },
        '.scrollbar-thin::-webkit-scrollbar-thumb': {
          background: '#888888',
          'border-radius': '10px',
        },
      }
      addUtilities(newUtilities)
    }
  ]
}

Casos de uso profesionales

1. Dashboards y aplicaciones web

Problema: Los dashboards con múltiples paneles scrollables necesitan scrollbars sutiles que no distraigan.

Solución:

css
.dashboard-panel {
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.15) transparent;
}

.dashboard-panel::-webkit-scrollbar {
  width: 6px;
}

.dashboard-panel::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.15);
  border-radius: 3px;
}

.dashboard-panel:hover {
  scrollbar-color: rgba(0,0,0,0.3) rgba(0,0,0,0.05);
}

2. Editores de código

Problema: Los editores necesitan scrollbars visibles pero no intrusivas.

Solución:

css
.code-editor {
  scrollbar-width: thin;
  scrollbar-color: #4a5568 #2d3748;
}

.code-editor::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.code-editor::-webkit-scrollbar-track {
  background: #2d3748;
}

.code-editor::-webkit-scrollbar-thumb {
  background: #4a5568;
}

.code-editor::-webkit-scrollbar-thumb:hover {
  background: #718096;
}

.code-editor::-webkit-scrollbar-corner {
  background: #2d3748;
}

3. Galerías y portfolios

Problema: Las galerías de imágenes necesitan scrollbars invisibles por defecto.

Solución:

css
.gallery {
  scrollbar-width: none; / Firefox /
  -ms-overflow-style: none; / IE/Edge /
}

.gallery::-webkit-scrollbar {
  display: none; / Chrome/Safari/Opera /
}

/ Mostrar al hover /
.gallery-container:hover .gallery {
  scrollbar-width: thin;
}

.gallery-container:hover .gallery::-webkit-scrollbar {
  display: block;
  width: 6px;
}

4. Aplicaciones de chat

Problema: Las ventanas de chat necesitan scrollbars que no ocupen espacio del contenido.

Solución:

css
.chat-messages {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e0 #edf2f7;
}

.chat-messages::-webkit-scrollbar {
  width: 6px;
}

.chat-messages::-webkit-scrollbar-track {
  background: #edf2f7;
}

.chat-messages::-webkit-scrollbar-thumb {
  background: #cbd5e0;
  border-radius: 10px;
}

/ Auto-hide cuando no está en uso /
.chat-messages:not(:hover)::-webkit-scrollbar-thumb {
  background: transparent;
}

Accesibilidad y mejores prácticas

Contraste y visibilidad

Principios clave:

Contraste mínimo: WCAG recomienda ratio de contraste de al menos 3:1
Visibilidad en hover: Aumentar contraste al pasar el ratón
No ocultar completamente: Evitar scrollbar-width: none en contenido largo

css
/ Buen contraste /
.accessible-scrollbar {
  scrollbar-color: #555555 #e0e0e0; / Ratio 4.5:1 /
}

/ Mal contraste - EVITAR /
.bad-scrollbar {
  scrollbar-color: #dddddd #ffffff; / Ratio insuficiente /
}

Tamaño táctil para móviles

Recomendaciones:

Mínimo 44x44 píxeles para interfaces táctiles
Considerar desactivar estilos personalizados en móvil

css
/ Scrollbar más grande en móvil /
@media (hover: none) and (pointer: coarse) {
  .custom-scrollbar::-webkit-scrollbar {
    width: 12px; / Mayor que en desktop /
  }
}

Respeto a las preferencias del usuario

css
/ Respetar preferencia de movimiento reducido /
@media (prefers-reduced-motion: reduce) {
  .custom-scrollbar::-webkit-scrollbar-thumb {
    transition: none;
  }
}

/ Adaptar a esquema de color preferido /
@media (prefers-color-scheme: dark) {
  .auto-theme-scrollbar {
    scrollbar-color: #4a5568 #1a202c;
  }
}

Solución de problemas comunes

1. Scrollbar no aparece en Firefox

Problema: Las propiedades WebKit no funcionan en Firefox.

Solución:

css
/ Siempre incluir propiedades estándar /
.elemento {
  scrollbar-width: thin;
  scrollbar-color: #888 #f1f1f1;
}

/ Estilos WebKit como mejora progresiva /
.elemento::-webkit-scrollbar {
  width: 8px;
}

2. Scrollbar horizontal no estilizada

Problema: Solo se estiliza la vertical.

Solución:

css
::-webkit-scrollbar {
  width: 8px;   / Vertical /
  height: 8px;  / Horizontal - no olvidar /
}

3. Conflictos con overflow-y

Problema: overflow-y: scroll muestra scrollbar sin personalizar.

Solución:

css
.elemento {
  overflow-y: auto; / Usar auto en lugar de scroll /
  scrollbar-width: thin;
  scrollbar-color: #888 #f1f1f1;
}

4. Scrollbar aparece sobre el contenido

Problema: En algunos navegadores la scrollbar se superpone al contenido.

Solución:

css
/ Añadir padding para compensar /
.elemento {
  padding-right: 12px; / Ancho de scrollbar /
  box-sizing: content-box;
}

Herramientas y recursos

Generador visual de scrollbars

Para facilitar la creación de scrollbars personalizados, hemos desarrollado un Generador de Scrollbars que te permite:

✨ Configuración visual:

Selector de ancho (auto, thin, none)
Selector de colores para thumb y track
Control de transparencia
Ajuste de radio de borde

🎨 Temas predefinidos:

Clásico, Azul, Verde, Oscuro, Púrpura, Ámbar
Un click para aplicar estilos completos

👁️ Vista previa en tiempo real:

Contenedor interactivo con scroll
Visualización inmediata de cambios

💻 Generación de código:

CSS completo y listo para copiar
Propiedades estándar + WebKit
Compatibilidad con todos los navegadores

Prueba el Generador de Scrollbars →

Librerías útiles

SimpleBar.js:

Scrollbars personalizados con JavaScript
Consistencia entre navegadores
Soporte para navegadores antiguos

OverlayScrollbars:

Scrollbars que se superponen al contenido
Altamente personalizable
Rendimiento optimizado

Tendencias futuras

CSS Scrollbars Module Level 1

El módulo está evolucionando con nuevas propiedades propuestas:

css
/ Propiedades futuras (en discusión) /
.future-scrollbar {
  scrollbar-gutter: stable; / Reservar espacio /
  scrollbar-face-color: #888;
  scrollbar-track-color: #f1f1f1;
  scrollbar-arrow-color: #666;
  scrollbar-shadow-color: rgba(0,0,0,0.2);
}

Scroll-driven animations

Animaciones basadas en el scroll están ganando soporte:

css
@keyframes scroll-fade {
  from { opacity: 0.3; }
  to { opacity: 1; }
}

.animated-scrollbar::-webkit-scrollbar-thumb {
  animation: scroll-fade linear;
  animation-timeline: scroll();
}

Preguntas frecuentes

¿Las scrollbars personalizadas afectan el rendimiento?

No significativamente. Las propiedades CSS estándar tienen impacto mínimo. Los pseudoelementos WebKit son igualmente eficientes.

¿Funcionan en móviles?

En navegadores móviles, las scrollbars suelen ocultarse automáticamente. Los estilos se aplican cuando son visibles (ej: al hacer scroll activamente).

¿Debo usar solo propiedades estándar o incluir WebKit?

Lo ideal es usar ambas:

Propiedades estándar para Firefox y navegadores modernos
Pseudoelementos WebKit para personalización avanzada en Chrome/Safari/Edge

¿Puedo animar las scrollbars?

Sí, con transiciones CSS:

css
::-webkit-scrollbar-thumb {
  background: #888;
  transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

¿Cómo testear en diferentes navegadores?

Usa herramientas como:

BrowserStack para testing cross-browser
DevTools de cada navegador
Nuestra herramienta con vista previa en tiempo real

Conclusión

Las scrollbars personalizadas son una forma simple pero efectiva de mejorar la experiencia visual de tu sitio web. Con las propiedades CSS modernas scrollbar-color y scrollbar-width, junto con los pseudoelementos WebKit, tienes control total sobre cómo se ven y se comportan las barras de desplazamiento.

Puntos clave a recordar:

🎨 Diseño coherente: Integra las scrollbars con tu identidad visual

♿ Accesibilidad: Mantén contraste adecuado y tamaños apropiados

🌐 Compatibilidad: Usa propiedades estándar + WebKit para máxima cobertura

📱 Responsive: Adapta los estilos según el dispositivo

🔄 Temas: Implementa con CSS variables para fácil switching

¿Listo para crear tus scrollbars personalizados?

Usa el Generador de Scrollbars →

No necesitas escribir CSS manualmente. Nuestra herramienta visual te permite crear, previsualizar y copiar el código en segundos.

Explorar más herramientas de desarrollo

Scrollbars Personalizados con CSS: La Guía Completa 2025

¿Por qué personalizar las scrollbars de tu sitio web?

1. Coherencia con el diseño de marca

Las scrollbars predeterminadas pueden chocar con tu identidad visual. Personalizar las barras de desplazamiento te permite:

Mantener la paleta de colores: Integrar los colores de tu marca en cada elemento
Mejorar la estética: Crear una experiencia visual cohesiva
Destacar del resto: Diferenciarte de sitios genéricos
Profesionalismo: Demostrar atención al detalle

2. Mejor experiencia de usuario

Scrollbars bien diseñadas mejoran la usabilidad:

Visibilidad mejorada: Scrollbars más visibles en fondos claros u oscuros
Feedback visual claro: Indicadores de posición más evidentes
Reducción de distracción: Scrollbars sutiles cuando no están en uso
Accesibilidad: Mayor contraste para usuarios con dificultades visuales

3. Adaptación al modo oscuro

Con la popularidad del modo oscuro, las scrollbars estándar pueden verse mal:

Scrollbars claras en interfaces oscuras causan fatiga visual
Personalización permite adaptar automáticamente al tema
Mejora la experiencia en entornos de poca luz

Propiedades CSS modernas para scrollbars

scrollbar-width: Control del grosor

La propiedad scrollbar-width es parte del estándar CSS Scrollbars Module Level 1 y permite controlar el ancho de las scrollbars.

Valores disponibles

css / Valores estándar / .elemento { scrollbar-width: auto; / Ancho predeterminado del navegador / scrollbar-width: thin; / Scrollbar delgada / scrollbar-width: none; / Sin scrollbar visible / }

Casos de uso

auto (predeterminado):

✅ Interfaces tradicionales
✅ Máxima compatibilidad
✅ Accesibilidad garantizada
❌ Puede ocupar mucho espacio

thin:

✅ Diseños minimalistas
✅ Interfaces modernas
✅ Ahorro de espacio
✅ Aspecto elegante
❌ Puede ser difícil de usar en móviles

none:

✅ Carruseles personalizados
✅ Scroll controlado por JavaScript
✅ Máximo espacio de contenido
❌ Problemas de accesibilidad
❌ Usuario puede no saber que hay scroll

scrollbar-color: Personalización de colores

La propiedad scrollbar-color permite definir los colores del thumb (deslizador) y el track (fondo).

Sintaxis

css
.elemento {
  / scrollbar-color:   /
  scrollbar-color: #888888 #f1f1f1;
  
  / Usar auto para valores predeterminados /
  scrollbar-color: auto;
}

Ejemplos prácticos

css
/ Tema claro profesional /
.light-theme {
  scrollbar-color: #888888 #f1f1f1;
}

/ Tema oscuro moderno /
.dark-theme {
  scrollbar-color: #555555 #2a2a2a;
}

/ Scrollbar de marca (azul) /
.brand-scrollbar {
  scrollbar-color: #3b82f6 #dbeafe;
}

/ Scrollbar sutil /
.subtle-scrollbar {
  scrollbar-color: rgba(0,0,0,0.2) transparent;
}

Compatibilidad de navegadores

scrollbar-color & scrollbar-width

Navegador	Versión mínima	Notas
Firefox	64+ (2018)	Soporte completo desde el inicio
Chrome	121+ (2024)	Soporte reciente
Safari	17.4+ (2024)	Soporte muy reciente
Edge	121+ (2024)	Basado en Chromium
Opera	107+ (2024)	Basado en Chromium

⚠️ Importante: Aunque el soporte es reciente en navegadores WebKit, la adopción está creciendo rápidamente.

Estilos WebKit: Personalización avanzada

Para navegadores basados en WebKit (Chrome, Safari, Edge), existen pseudoelementos que permiten personalización mucho más detallada.

Pseudoelementos WebKit disponibles

css
/ Contenedor principal de la scrollbar /
::-webkit-scrollbar {
  width: 12px;  / Ancho para scroll vertical /
  height: 12px; / Alto para scroll horizontal /
}

/ Fondo/riel de la scrollbar /
::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

/ El deslizador/thumb /
::-webkit-scrollbar-thumb {
  background: #888888;
  border-radius: 10px;
}

/ Estado hover del thumb /
::-webkit-scrollbar-thumb:hover {
  background: #555555;
}

/ Esquinas donde se cruzan scrollbars /
::-webkit-scrollbar-corner {
  background: transparent;
}

Ejemplo completo con todas las variantes

css
.custom-scrollbar {
  / Propiedades estándar (Firefox, Chrome 121+, Safari 17.4+) /
  scrollbar-width: thin;
  scrollbar-color: #888888 #f1f1f1;
}

/ Estilos WebKit para mayor control /
.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
  margin: 2px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #888888 0%, #666666 100%);
  border-radius: 10px;
  border: 2px solid #f1f1f1;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #666666 0%, #444444 100%);
}

.custom-scrollbar::-webkit-scrollbar-thumb:active {
  background: #444444;
}

Patrones de diseño populares

1. Scrollbar minimalista moderna

css
.minimal-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.2) transparent;
}

.minimal-scrollbar::-webkit-scrollbar {
  width: 6px;
}

.minimal-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.minimal-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.2);
  border-radius: 3px;
}

.minimal-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.4);
}

Características:

Extremadamente sutil
No distrae del contenido
Ideal para portfolios y galerías

2. Scrollbar con efecto de profundidad

css
.depth-scrollbar {
  scrollbar-width: auto;
  scrollbar-color: #555555 #e0e0e0;
}

.depth-scrollbar::-webkit-scrollbar {
  width: 14px;
}

.depth-scrollbar::-webkit-scrollbar-track {
  background: #e0e0e0;
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
}

.depth-scrollbar::-webkit-scrollbar-thumb {
  background: linear-gradient(45deg, #666666 0%, #444444 100%);
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.depth-scrollbar::-webkit-scrollbar-thumb:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

Características:

Efecto 3D sutil
Mayor visibilidad
Profesional y elegante

3. Scrollbar con degradado de marca

css
.brand-gradient-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #3b82f6 #dbeafe;
}

.brand-gradient-scrollbar::-webkit-scrollbar {
  width: 10px;
}

.brand-gradient-scrollbar::-webkit-scrollbar-track {
  background: linear-gradient(180deg, #dbeafe 0%, #bfdbfe 100%);
  border-radius: 10px;
}

.brand-gradient-scrollbar::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #60a5fa 0%, #3b82f6 50%, #2563eb 100%);
  border-radius: 10px;
}

.brand-gradient-scrollbar::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 50%, #1d4ed8 100%);
}

Características:

Colorido y llamativo
Refuerza la identidad de marca
Ideal para sitios creativos

4. Scrollbar para modo oscuro

css
.dark-mode-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #4a5568 #1a202c;
}

.dark-mode-scrollbar::-webkit-scrollbar {
  width: 8px;
}

.dark-mode-scrollbar::-webkit-scrollbar-track {
  background: #1a202c;
  border-radius: 10px;
}

.dark-mode-scrollbar::-webkit-scrollbar-thumb {
  background: #4a5568;
  border-radius: 10px;
  border: 2px solid #1a202c;
}

.dark-mode-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #718096;
}

Características:

Optimizado para interfaces oscuras
Reduce fatiga visual
Contraste apropiado

Implementación con temas dinámicos

Usando CSS Variables

css
:root {
  / Tema claro /
  --scrollbar-thumb: #888888;
  --scrollbar-track: #f1f1f1;
  --scrollbar-thumb-hover: #555555;
}

[data-theme="dark"] {
  / Tema oscuro /
  --scrollbar-thumb: #4a5568;
  --scrollbar-track: #1a202c;
  --scrollbar-thumb-hover: #718096;
}

.adaptive-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

.adaptive-scrollbar::-webkit-scrollbar {
  width: 8px;
}

.adaptive-scrollbar::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: 10px;
}

.adaptive-scrollbar::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 10px;
}

.adaptive-scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

Con Tailwind CSS

javascript
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'scrollbar-thumb': '#888888',
        'scrollbar-track': '#f1f1f1',
      }
    }
  },
  plugins: [
    function({ addUtilities }) {
      const newUtilities = {
        '.scrollbar-thin': {
          'scrollbar-width': 'thin',
          'scrollbar-color': '#888888 #f1f1f1',
        },
        '.scrollbar-thin::-webkit-scrollbar': {
          width: '8px',
        },
        '.scrollbar-thin::-webkit-scrollbar-track': {
          background: '#f1f1f1',
          'border-radius': '10px',
        },
        '.scrollbar-thin::-webkit-scrollbar-thumb': {
          background: '#888888',
          'border-radius': '10px',
        },
      }
      addUtilities(newUtilities)
    }
  ]
}

Casos de uso profesionales

1. Dashboards y aplicaciones web

Problema: Los dashboards con múltiples paneles scrollables necesitan scrollbars sutiles que no distraigan.

Solución:

css
.dashboard-panel {
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.15) transparent;
}

.dashboard-panel::-webkit-scrollbar {
  width: 6px;
}

.dashboard-panel::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.15);
  border-radius: 3px;
}

.dashboard-panel:hover {
  scrollbar-color: rgba(0,0,0,0.3) rgba(0,0,0,0.05);
}

2. Editores de código

Problema: Los editores necesitan scrollbars visibles pero no intrusivas.

Solución:

css
.code-editor {
  scrollbar-width: thin;
  scrollbar-color: #4a5568 #2d3748;
}

.code-editor::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.code-editor::-webkit-scrollbar-track {
  background: #2d3748;
}

.code-editor::-webkit-scrollbar-thumb {
  background: #4a5568;
}

.code-editor::-webkit-scrollbar-thumb:hover {
  background: #718096;
}

.code-editor::-webkit-scrollbar-corner {
  background: #2d3748;
}

3. Galerías y portfolios

Problema: Las galerías de imágenes necesitan scrollbars invisibles por defecto.

Solución:

css
.gallery {
  scrollbar-width: none; / Firefox /
  -ms-overflow-style: none; / IE/Edge /
}

.gallery::-webkit-scrollbar {
  display: none; / Chrome/Safari/Opera /
}

/ Mostrar al hover /
.gallery-container:hover .gallery {
  scrollbar-width: thin;
}

.gallery-container:hover .gallery::-webkit-scrollbar {
  display: block;
  width: 6px;
}

4. Aplicaciones de chat

Problema: Las ventanas de chat necesitan scrollbars que no ocupen espacio del contenido.

Solución:

css
.chat-messages {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e0 #edf2f7;
}

.chat-messages::-webkit-scrollbar {
  width: 6px;
}

.chat-messages::-webkit-scrollbar-track {
  background: #edf2f7;
}

.chat-messages::-webkit-scrollbar-thumb {
  background: #cbd5e0;
  border-radius: 10px;
}

/ Auto-hide cuando no está en uso /
.chat-messages:not(:hover)::-webkit-scrollbar-thumb {
  background: transparent;
}

Accesibilidad y mejores prácticas

Contraste y visibilidad

Principios clave:

Contraste mínimo: WCAG recomienda ratio de contraste de al menos 3:1
Visibilidad en hover: Aumentar contraste al pasar el ratón
No ocultar completamente: Evitar scrollbar-width: none en contenido largo

css
/ Buen contraste /
.accessible-scrollbar {
  scrollbar-color: #555555 #e0e0e0; / Ratio 4.5:1 /
}

/ Mal contraste - EVITAR /
.bad-scrollbar {
  scrollbar-color: #dddddd #ffffff; / Ratio insuficiente /
}

Tamaño táctil para móviles

Recomendaciones:

Mínimo 44x44 píxeles para interfaces táctiles
Considerar desactivar estilos personalizados en móvil

css
/ Scrollbar más grande en móvil /
@media (hover: none) and (pointer: coarse) {
  .custom-scrollbar::-webkit-scrollbar {
    width: 12px; / Mayor que en desktop /
  }
}

Respeto a las preferencias del usuario

css
/ Respetar preferencia de movimiento reducido /
@media (prefers-reduced-motion: reduce) {
  .custom-scrollbar::-webkit-scrollbar-thumb {
    transition: none;
  }
}

/ Adaptar a esquema de color preferido /
@media (prefers-color-scheme: dark) {
  .auto-theme-scrollbar {
    scrollbar-color: #4a5568 #1a202c;
  }
}

Solución de problemas comunes

1. Scrollbar no aparece en Firefox

Problema: Las propiedades WebKit no funcionan en Firefox.

Solución:

css
/ Siempre incluir propiedades estándar /
.elemento {
  scrollbar-width: thin;
  scrollbar-color: #888 #f1f1f1;
}

/ Estilos WebKit como mejora progresiva /
.elemento::-webkit-scrollbar {
  width: 8px;
}

2. Scrollbar horizontal no estilizada

Problema: Solo se estiliza la vertical.

Solución:

css
::-webkit-scrollbar {
  width: 8px;   / Vertical /
  height: 8px;  / Horizontal - no olvidar /
}

3. Conflictos con overflow-y

Problema: overflow-y: scroll muestra scrollbar sin personalizar.

Solución:

css
.elemento {
  overflow-y: auto; / Usar auto en lugar de scroll /
  scrollbar-width: thin;
  scrollbar-color: #888 #f1f1f1;
}

4. Scrollbar aparece sobre el contenido

Problema: En algunos navegadores la scrollbar se superpone al contenido.

Solución:

css
/ Añadir padding para compensar /
.elemento {
  padding-right: 12px; / Ancho de scrollbar /
  box-sizing: content-box;
}

Herramientas y recursos

Generador visual de scrollbars

Para facilitar la creación de scrollbars personalizados, hemos desarrollado un Generador de Scrollbars que te permite:

✨ Configuración visual:

Selector de ancho (auto, thin, none)
Selector de colores para thumb y track
Control de transparencia
Ajuste de radio de borde

🎨 Temas predefinidos:

Clásico, Azul, Verde, Oscuro, Púrpura, Ámbar
Un click para aplicar estilos completos

👁️ Vista previa en tiempo real:

Contenedor interactivo con scroll
Visualización inmediata de cambios

💻 Generación de código:

CSS completo y listo para copiar
Propiedades estándar + WebKit
Compatibilidad con todos los navegadores

Prueba el Generador de Scrollbars →

Librerías útiles

SimpleBar.js:

Scrollbars personalizados con JavaScript
Consistencia entre navegadores
Soporte para navegadores antiguos

OverlayScrollbars:

Scrollbars que se superponen al contenido
Altamente personalizable
Rendimiento optimizado

Tendencias futuras

CSS Scrollbars Module Level 1

El módulo está evolucionando con nuevas propiedades propuestas:

css
/ Propiedades futuras (en discusión) /
.future-scrollbar {
  scrollbar-gutter: stable; / Reservar espacio /
  scrollbar-face-color: #888;
  scrollbar-track-color: #f1f1f1;
  scrollbar-arrow-color: #666;
  scrollbar-shadow-color: rgba(0,0,0,0.2);
}

Scroll-driven animations

Animaciones basadas en el scroll están ganando soporte:

css
@keyframes scroll-fade {
  from { opacity: 0.3; }
  to { opacity: 1; }
}

.animated-scrollbar::-webkit-scrollbar-thumb {
  animation: scroll-fade linear;
  animation-timeline: scroll();
}

Preguntas frecuentes

¿Las scrollbars personalizadas afectan el rendimiento?

No significativamente. Las propiedades CSS estándar tienen impacto mínimo. Los pseudoelementos WebKit son igualmente eficientes.

¿Funcionan en móviles?

En navegadores móviles, las scrollbars suelen ocultarse automáticamente. Los estilos se aplican cuando son visibles (ej: al hacer scroll activamente).

¿Debo usar solo propiedades estándar o incluir WebKit?

Lo ideal es usar ambas:

Propiedades estándar para Firefox y navegadores modernos
Pseudoelementos WebKit para personalización avanzada en Chrome/Safari/Edge

¿Puedo animar las scrollbars?

Sí, con transiciones CSS:

css
::-webkit-scrollbar-thumb {
  background: #888;
  transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

¿Cómo testear en diferentes navegadores?

Usa herramientas como:

BrowserStack para testing cross-browser
DevTools de cada navegador
Nuestra herramienta con vista previa en tiempo real

Conclusión

Puntos clave a recordar:

🎨 Diseño coherente: Integra las scrollbars con tu identidad visual

♿ Accesibilidad: Mantén contraste adecuado y tamaños apropiados

🌐 Compatibilidad: Usa propiedades estándar + WebKit para máxima cobertura

📱 Responsive: Adapta los estilos según el dispositivo

🔄 Temas: Implementa con CSS variables para fácil switching

¿Listo para crear tus scrollbars personalizados?

Usa el Generador de Scrollbars →

No necesitas escribir CSS manualmente. Nuestra herramienta visual te permite crear, previsualizar y copiar el código en segundos.

Explorar más herramientas de desarrollo

Scrollbars Personalizados con CSS 2025 | Guía Completa scrollbar-color y scrollbar-width

Scrollbars Personalizados con CSS: La Guía Completa 2025

¿Por qué personalizar las scrollbars de tu sitio web?

1. Coherencia con el diseño de marca

2. Mejor experiencia de usuario

3. Adaptación al modo oscuro

Propiedades CSS modernas para scrollbars

scrollbar-width: Control del grosor

Valores disponibles

Casos de uso

scrollbar-color: Personalización de colores

Sintaxis

Ejemplos prácticos

Compatibilidad de navegadores

scrollbar-color & scrollbar-width

Estilos WebKit: Personalización avanzada

Pseudoelementos WebKit disponibles

Ejemplo completo con todas las variantes

Patrones de diseño populares

1. Scrollbar minimalista moderna

2. Scrollbar con efecto de profundidad

3. Scrollbar con degradado de marca

4. Scrollbar para modo oscuro

Implementación con temas dinámicos

Usando CSS Variables

Con Tailwind CSS

Casos de uso profesionales

1. Dashboards y aplicaciones web

2. Editores de código

3. Galerías y portfolios

4. Aplicaciones de chat

Accesibilidad y mejores prácticas

Contraste y visibilidad

Tamaño táctil para móviles

Respeto a las preferencias del usuario

Solución de problemas comunes

1. Scrollbar no aparece en Firefox

2. Scrollbar horizontal no estilizada

3. Conflictos con overflow-y

4. Scrollbar aparece sobre el contenido

Herramientas y recursos

Generador visual de scrollbars

Librerías útiles

Tendencias futuras

CSS Scrollbars Module Level 1

Scroll-driven animations

Preguntas frecuentes

¿Las scrollbars personalizadas afectan el rendimiento?

¿Funcionan en móviles?

¿Debo usar solo propiedades estándar o incluir WebKit?

¿Puedo animar las scrollbars?

¿Cómo testear en diferentes navegadores?

Conclusión

Puntos clave a recordar:

¿Listo para crear tus scrollbars personalizados?

Herramienta relacionada

Scrollbars Personalizados con CSS 2025 | Guía Completa scrollbar-color y scrollbar-width

Scrollbars Personalizados con CSS: La Guía Completa 2025

¿Por qué personalizar las scrollbars de tu sitio web?

1. Coherencia con el diseño de marca

2. Mejor experiencia de usuario

3. Adaptación al modo oscuro

Propiedades CSS modernas para scrollbars

scrollbar-width: Control del grosor

Valores disponibles

Casos de uso

scrollbar-color: Personalización de colores

Sintaxis

Ejemplos prácticos

Compatibilidad de navegadores

scrollbar-color & scrollbar-width

Estilos WebKit: Personalización avanzada

Pseudoelementos WebKit disponibles

Ejemplo completo con todas las variantes

Patrones de diseño populares

1. Scrollbar minimalista moderna

2. Scrollbar con efecto de profundidad

3. Scrollbar con degradado de marca

4. Scrollbar para modo oscuro

Implementación con temas dinámicos