Generador de barra de desplazamiento CSS
Elige los colores y la forma, y desplaza la caja de ejemplo. El código combina las propiedades nuevas con la versión antigua de Chrome y Safari.
Cómo usarBarra de desplazamiento con los colores del sitio
Disponible en: 
Generador de barra de desplazamiento CSS: para qué sirve
Una barra de desplazamiento con los colores de la marca le da mejor acabado al sitio, pero el CSS cambió: hoy existen las propiedades estándar scrollbar-color y scrollbar-width, aceptadas por Firefox, Chrome y Edge 121 y Safari 26.2, mientras que las versiones antiguas solo entienden ::-webkit-scrollbar.
Este generador arma las dos formas separadas por @supports, como recomienda la documentación de Chrome, porque cuando scrollbar-color está definida Chrome ignora las reglas antiguas. Eliges los colores del riel y de la barra, el ancho, las esquinas y el color al pasar el mouse, y lo pruebas en la caja de ejemplo.
Cómo usar
- Elige los colores del riel y de la barra.
- Ajusta el ancho y las esquinas.
- Copia el CSS para toda la página o para una caja.
Cuándo usar
- Barra de desplazamiento con los colores de la marca.
- Cajas con desplazamiento dentro de la página.
- Paneles y sistemas con tema oscuro.
Preguntas frecuentes
¿Funciona en todos los navegadores?
Las propiedades estándar scrollbar-color y scrollbar-width funcionan en Firefox, Chrome y Edge desde la versión 121 y en Safari 26.2. Para versiones anteriores, el código trae también las reglas ::-webkit-scrollbar, que cambian el ancho, las esquinas y el color al pasar el mouse.
¿Por qué el código usa @supports?
En Chrome, cuando se define scrollbar-color, las reglas ::-webkit-scrollbar se ignoran. @supports aplica las propiedades estándar solo donde existen y deja las reglas antiguas para los navegadores que no las conocen.
¿Personalizar la barra afecta la accesibilidad?
Puede afectarla si queda demasiado delgada o sin contraste con el riel. Mantén un ancho que se pueda tomar con el mouse y un color que destaque del fondo.
¿Es gratis de verdad?
Sí, 100% gratis. Sin registro, sin suscripción y sin límite de uso. Todas las herramientas de Tools123 son gratuitas.