Generador de Scrollbars Personalizadas
Scrollbars a juego con tu diseño usando ::-webkit-scrollbar y scrollbar-color, con vista previa que se aplica en vivo.
La vista previa usa tu configuración real; haz scroll dentro del panel.
Línea de contenido de ejemplo número 1.
Línea de contenido de ejemplo número 2.
Línea de contenido de ejemplo número 3.
Línea de contenido de ejemplo número 4.
Línea de contenido de ejemplo número 5.
Línea de contenido de ejemplo número 6.
Línea de contenido de ejemplo número 7.
Línea de contenido de ejemplo número 8.
Línea de contenido de ejemplo número 9.
Línea de contenido de ejemplo número 10.
Línea de contenido de ejemplo número 11.
Línea de contenido de ejemplo número 12.
Línea de contenido de ejemplo número 13.
Línea de contenido de ejemplo número 14.
Línea de contenido de ejemplo número 15.
Línea de contenido de ejemplo número 16.
Línea de contenido de ejemplo número 17.
Línea de contenido de ejemplo número 18.
Línea de contenido de ejemplo número 19.
Línea de contenido de ejemplo número 20.
Línea de contenido de ejemplo número 21.
Línea de contenido de ejemplo número 22.
Línea de contenido de ejemplo número 23.
Línea de contenido de ejemplo número 24.
/* Chrome, Edge y Safari */
::-webkit-scrollbar {
width: 12px;
height: 12px;
}
::-webkit-scrollbar-track {
background: #1e1b29;
}
::-webkit-scrollbar-thumb {
background: #7c3aed;
border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
background: #5b21b6;
}
/* Firefox */
* {
scrollbar-width: thin;
scrollbar-color: #7c3aed #1e1b29;
}Hecho por
Miguel Ángel Colorado Marin (MACM)
Hecho por
Miguel Ángel Colorado Marin (MACM)
Full-Stack Developer · Guadalajara, España
Desarrollo aplicaciones web, herramientas digitales y proyectos completos — desde el diseño hasta el despliegue.
La barra de scroll por defecto rompe cualquier diseño cuidado, pero personalizarla tiene truco: los navegadores Chromium y Safari usan las pseudo-clases ::-webkit-scrollbar mientras Firefox implementa las propiedades estándar scrollbar-width y scrollbar-color. Un scrollbar realmente multiplataforma necesita ambas sintaxis. Este generador produce las dos a la vez, con grosor, radios y colores independientes para pulgar, estado hover y raíl. La gracia está en la vista previa: el panel de ejemplo aplica tu configuración en vivo, así que puedes hacer scroll real dentro de la herramienta y comprobar cómo se siente antes de copiar el CSS.
Características
- ✓Doble sintaxis: WebKit (Chromium/Safari) y Firefox
- ✓Grosor, radio, colores de pulgar, hover y raíl
- ✓Vista previa real con scroll dentro de la tool
- ✓Incluye scrollbar-width y scrollbar-color
- ✓100% en el navegador, sin registro
¿Cómo personalizar una scrollbar?
- 1
Ajusta grosor y forma
Grosor de la barra y radio de esquinas del pulgar.
- 2
Elige los tres colores
Pulgar, estado hover y raíl sobre el que se desliza.
- 3
Prueba haciendo scroll
El panel de ejemplo refleja tu configuración al instante.
- 4
Aplica el CSS global
Pégalo en tu hoja base para afectar a toda la página.
Preguntas frecuentes
¿Por qué dos sintaxis distintas?
Las pseudo-clases -webkit- son un mecanismo propietario que Chromium y Safari mantienen; Firefox rechaza implementarlas y ofrece las propiedades estándar de CSS Scrollbars. Cubrir usuarios reales requiere emitir ambas.
¿Puedo estilar solo el scroll de un panel concreto?
Sí: sustituye el selector global *::-webkit-scrollbar por .mi-panel::-webkit-scrollbar y mueve scrollbar-color al propio panel en vez de a *.
¿Funciona en móvil?
iOS y Android suelen usar scrollbars superpuestas nativas que ignoran estos estilos. La personalización brilla en escritorio; en móvil conviene no depender de ella.
Herramientas relacionadas
Incrusta Scrollbars Personalizadas en tu web
Integra Scrollbars Personalizadas en cualquier página web con un simple iframe. Gratis, con atribución a miguelacm.es.
<iframe
src="https://miguelacm.es/embed/custom-scrollbar-generator"
width="100%"
height="700"
frameborder="0"
title="Scrollbars Personalizadas — miguelacm.es"
></iframe>