Generador de estilos de barra de desplazamiento CSS
Genera reglas CSS ::-webkit-scrollbar y scrollbar-width/scrollbar-color personalizadas.
Generador de estilos de barra de desplazamiento CSS
La barra de desplazamiento predeterminada del navegador rara vez coincide con el resto del diseño, y personalizarla significa recordar dos especificaciones diferentes a la vez: los pseudoelementos ::-webkit-scrollbar de WebKit que usan Chrome, Safari y Edge, y las propiedades estándar scrollbar-width/scrollbar-color que Firefox lee. Esta herramienta genera ambas a la vez desde unas pocas opciones, por lo que copias un bloque de CSS y cada navegador importante renderiza una barra de desplazamiento coincidente.
Establece un selector de destino —body para toda la página, o una clase como .sidebar para un panel desplazable— luego elige el ancho de la barra de desplazamiento en píxeles, los colores de la pista y del pulgar, y el color que el pulgar cambia al pasar. La redondez del pulgar controla el border-radius de la barra arrastrable, y el borde interno agrega un espacio transparente entre el pulgar y la pista para que se lea como una píldora flotante en lugar de un bloque sólido. La opción Variante cambia entre la barra de desplazamiento normal del navegador, una más delgada "delgada", y "oculta", que elimina la barra por completo con -ms-overflow-style y scrollbar-width: none mientras deja el desplazamiento propio del elemento intacto.
Al activar la variante de modo oscuro, envuelve una segunda copia de las reglas en un bloque @media (prefers-color-scheme: dark), con los colores de la pista y del pulgar automáticamente oscurecidos para que un sitio que ya cambia temas obtenga una barra de desplazamiento que cambia con él —sin necesidad de cálculos separados. Cada opción actualiza la salida en vivo mientras la ajustas, y el total bajo el resultado informa cuántos bloques de reglas CSS se generaron y el recuento exacto de caracteres.
Todo se ejecuta localmente en tu navegador: ningún selector, color o CSS se envía nunca a un servidor. Copia el resultado directamente en tu hoja de estilos, descárgalo como archivo .txt, o envíalo a la entrada de otra herramienta para seguir refinándolo.