Generador de scrollbar CSS
Diseña una barra de desplazamiento personalizada de forma visual: elige el ancho, los colores del riel y del thumb, las esquinas redondeadas, el relleno y el color al pasar el cursor, y desplázate por la vista previa en vivo. Copia CSS compatible con todos los navegadores que combina ::-webkit-scrollbar con las propiedades estándar scrollbar-color y scrollbar-width.
Última actualización:
Tamaño y forma
Colores
Vista previa en vivo
Desplázate o arrastra las barrasAplicar a
Cómo usar Generador de scrollbar CSS
- Empieza con un ajuste predefinido como Delgada, Redondeada u Oscura, o conserva el predeterminado.
- Ajusta el ancho y los colores del thumb (la parte que se arrastra) y del riel (la guía que está detrás).
- Ajusta la forma: radio de las esquinas, relleno alrededor del thumb y color al pasar el cursor.
- Desplázate por la vista previa para probarla y elige si el estilo se aplica a toda la página o solo a elementos con tu clase.
- Copia el CSS y pégalo en tu hoja de estilos.
Propiedades CSS de la barra de desplazamiento explicadas
| Selector / propiedad | Navegadores | Qué estiliza |
|---|---|---|
::-webkit-scrollbar | Chrome, Edge, Safari, Opera | Toda la barra de desplazamiento: width para barras verticales, height para las horizontales |
::-webkit-scrollbar-track | Chrome, Edge, Safari, Opera | El riel por el que se desliza el thumb |
::-webkit-scrollbar-thumb | Chrome, Edge, Safari, Opera | El control que se arrastra; admite :hover y :active |
::-webkit-scrollbar-corner | Chrome, Edge, Safari, Opera | El cuadrado donde se juntan una barra vertical y una horizontal |
scrollbar-color | Firefox, Chrome/Edge 121+ | Dos colores: primero el thumb, luego el riel |
scrollbar-width | Firefox, Chrome/Edge 121+ | auto, thin o none (sin valores en píxeles) |
Por qué las reglas de Firefox van dentro de @supports
Los navegadores Chromium ahora admiten ambos sistemas. Cuando un elemento tiene definidos scrollbar-color o scrollbar-width, Chrome y Edge 121+ usan esas propiedades estándar e ignoran todas las reglas ::-webkit-scrollbar, por lo que desaparecen los thumbs redondeados, el relleno y los colores al pasar el cursor. @supports not selector(::-webkit-scrollbar) aplica las propiedades estándar solo en los navegadores que no entienden los pseudoelementos WebKit, que hoy significa Firefox. Si prefieres el estilo estándar más simple en todas partes, desmarca la opción.
Consejos de diseño
- Haz el thumb claramente más oscuro (o más claro en temas oscuros) que el riel; un contraste de 3:1 facilita encontrarlo.
- Un borde transparente más
background-clip: padding-boxcrea un thumb en forma de píldora flotante sin reducir el área en la que se puede hacer clic. - Aplica estilos a las barras de paneles concretos con una clase en lugar de a toda la página si quieres que la página principal conserve la barra habitual del sistema.
- Ocultar las barras elimina una señal visual de que hay más contenido; si las ocultas, añade otra pista, como un desvanecido en el borde.
Preguntas frecuentes
¿Cómo cambio el color de la barra de desplazamiento con CSS?
Usa scrollbar-color: color-del-thumb color-del-riel; esta propiedad estándar funciona en Firefox y en Chrome y Edge 121+. Para controlar por completo el tamaño, las esquinas redondeadas y los colores al pasar el cursor en Chrome, Edge y Safari, aplica estilos también a los pseudoelementos ::-webkit-scrollbar, ::-webkit-scrollbar-track y ::-webkit-scrollbar-thumb. El generador produce ambos.
¿Por qué Chrome ignora mis estilos ::-webkit-scrollbar?
Desde Chrome 121, un elemento que tiene definidos scrollbar-color o scrollbar-width usa las propiedades estándar e ignora ::-webkit-scrollbar. El CSS generado envuelve las propiedades estándar en @supports not selector(::-webkit-scrollbar), de modo que Chromium y Safari conservan los estilos WebKit detallados mientras Firefox usa los estándar.
¿Puedo definir un ancho exacto de scrollbar en Firefox?
No. Firefox solo acepta scrollbar-width: auto, thin o none. El generador elige thin cuando tu ancho es de 10px o menos, y auto en los demás casos. Las esquinas redondeadas, el relleno, los degradados y los colores al pasar el cursor solo funcionan en WebKit, así que Firefox muestra una versión más simple con los colores que elegiste.
¿Cómo oculto la barra de desplazamiento sin perder el desplazamiento?
Usa scrollbar-width: none para Firefox y ::-webkit-scrollbar { display: none; } para Chromium y Safari. El elemento sigue desplazándose con la rueda del mouse, el tacto y el teclado. Úsalo con moderación, porque una barra visible indica a los usuarios que hay más contenido.
¿Cómo creo un espacio alrededor del thumb de la barra?
Dale al thumb un borde transparente y background-clip: padding-box. El borde se convierte en una separación entre el thumb y el borde del riel, y el thumb parece una píldora flotante. El control Relleno del thumb lo ajusta.
¿Funcionan las barras personalizadas en teléfonos?
Los navegadores móviles de iOS y Android usan barras finas superpuestas que solo aparecen al desplazarse, y la mayoría ignora los estilos personalizados. Las barras personalizadas importan sobre todo en computadoras de escritorio.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.