Desplaza esta caja para ver tu barra de scroll personalizada.
El diseño de la barra cambia en tiempo real según los controles de la derecha.
En Chrome, Edge y Safari se usan las pseudo-clases ::-webkit-scrollbar.
En Firefox se usan scrollbar-width y scrollbar-color.
Cuando te guste el resultado, copia el código y pégalo en tu CSS.
Puedes aplicarlo a toda la página o a un contenedor concreto.
Con esta herramienta puedes personalizar la barra de scroll con CSS: ajusta el ancho, el color del riel y del pulgar y el radio, con vista previa en vivo. Copia el código, que incluye las versiones para Chrome/Edge/Safari y para Firefox. Funciona en tu navegador, sin registro y en español.
Cómo personalizar la barra de scroll
- Ajusta el ancho, el radio y los colores.
- Elige si aplicarlo a toda la página o a un contenedor.
- Copia el CSS y pégalo en tu hoja de estilos.
Chrome y Firefox usan reglas distintas
Los navegadores basados en Chromium (Chrome, Edge) y Safari usan las pseudo-clases ::-webkit-scrollbar, ::-webkit-scrollbar-track y ::-webkit-scrollbar-thumb. Firefox usa las propiedades estándar scrollbar-width y scrollbar-color. Por eso el código generado incluye ambas. Para seguir dando estilo a tu web, prueba nuestro generador CSS Matic.
Preguntas frecuentes
¿Funciona en todos los navegadores?
Sí, porque el código incluye la sintaxis de WebKit (Chrome, Edge, Safari) y la estándar (Firefox). En navegadores muy antiguos puede que no se aplique.
¿Puedo personalizar solo una caja concreta?
Sí. Elige la opción de contenedor y sustituye .mi-caja por el selector de tu elemento.
¿Afecta al rendimiento?
No, es solo CSS. No tiene impacto perceptible en el rendimiento.
¿Te ha sido útil este contenido? Puedes invitarme a un café para ayudar a mantener el proyecto.
Invítame a un café
