Saltar al contenido
VoriTools

Generador de barras de desplazamiento CSS

Ajusta ancho, radio, borde y tres colores, comprueba el resultado en la vista previa desplazable y copia el CSS generado.

Se ejecuta localmente en tu navegador
Ver categoría: Frontend y diseño (34)
· ::-webkit-scrollbar · scrollbar-color · Firefox
PANEL DE CONTROL
VISTA PREVIA
01

Scrollable developer notes

Use the thumb to inspect the generated width, border and hover treatment.

02

Cross-browser output

The export includes standardized Firefox properties and WebKit pseudo-elements.

03

Copy production CSS

Apply the generated class to any overflow container in your interface.

04

Keep native behavior

Styling changes appearance while keyboard and wheel scrolling remain native.

EXPORTAR CSS


Cómo estilizar una barra de desplazamiento y copiar el CSS generado
El generador escribe dos juegos de reglas a partir de los mismos seis valores: las propiedades estándar scrollbar-width y scrollbar-color para Firefox, y la familia ::-webkit-scrollbar — pista, control, hover y ancho/alto — para Chromium y Safari. El indicador de la cabecera del escenario muestra el ancho actual y la palabra clave que le corresponde, por ejemplo «12px · auto».
La vista previa es un contenedor con desbordamiento real, no un dibujo: en la prueba había 528 px de contenido dentro de una ventana de 300 px, así que la barra la pinta el propio navegador. El mismo CSS que aparece en el panel de código se inyecta con #cs-scroll-preview como selector; solo cambia el nombre de la clase respecto a lo que copias.
  1. Elige un preajuste para cargar un juego completo de valores. Forest es el predeterminado —ancho 12, radio 10, borde 3, control #2e8b62, hover #1f6f4b, pista #e7f0eb—, seguido de Slate (11/3/2), Sunset (14/12/3) y Minimal (7/7/0).
  2. También puedes fijar los valores a mano: Ancho (4–28 px), Radio de esquina (0–30 px), Borde del control (0–6 px) y los colores del control, del hover y de la pista. Al editar un campo el selector pasa a su entrada Personalizado; Restablecer devuelve los valores de Forest.
  3. Los números se confirman al salir del campo o al pulsar Enter: se redondean a píxeles enteros, se limitan a su rango y se reescriben en el campo. 100 pasa a 28, 3 pasa a 4, un campo vacío vuelve a 4 y 12.6 pasa a 13, así que el número en pantalla, el indicador y el CSS exportado nunca se contradicen.
  4. Observa la vista previa mientras cambias valores: se desplaza de verdad, así que el control, su borde, la pista y el color del hover los pinta el navegador. Los anchos de 10 px o menos cambian además la declaración estándar a scrollbar-width: thin; a partir de 11 px se usa auto, porque Firefox solo acepta esas dos palabras clave y el ancho exacto en píxeles es una función de WebKit.
  5. Pulsa Copiar CSS para llevar el texto del panel de código al portapapeles —cinco reglas y nada más— o Restablecer para volver a los valores de Forest. El selector del resultado es .custom-scrollbar; cámbialo por la clase de tu propio contenedor con desbordamiento.
Ancho, colores, preajustes y los dos juegos de reglas que escribe el generador
Qué contiene el CSS copiado
El bloque reúne cinco reglas: la clase base con scrollbar-color: <control> <pista>, ::-webkit-scrollbar con el ancho y el alto, ::-webkit-scrollbar-track con el color de la pista y el radio, ::-webkit-scrollbar-thumb con el color del control, un borde pintado con el color de la pista y el mismo radio, y ::-webkit-scrollbar-thumb:hover con el color del hover.
Los colores se escriben como hex de seis dígitos, en minúsculas, y los números como píxeles enteros. El borde del control usa a propósito el color de la pista: contrae el control para que la pista asome como una línea fina alrededor, y por eso cambiar el color de la pista cambia también el borde.
Preajustes, valores predeterminados y Restablecer
Los cuatro preajustes son juegos de valores fijos, no hojas de estilo: Forest 12/10/3 con #2e8b62, #1f6f4b y #e7f0eb, Slate 11/3/2 con #526575, #354754 y #dfe5e8, Sunset 14/12/3 con #d87352, #a94f3a y #f7e4dc, y Minimal 7/7/0 con #87958e, #53635b y #f3f6f4. El orden es ancho, radio, borde y después control, hover y pista.
Personalizado es un estado, no un quinto preajuste: la entrada permanece oculta en la lista, aparece como etiqueta seleccionada en cuanto se edita un campo y elegirla no sobrescribe los valores en pantalla. Restablecer devuelve los valores de Forest y limpia la línea de estado.
Límites, cobertura de navegadores y procesamiento local
El ancho se limita a 4–28 px, el radio a 0–30 px y el borde del control a 0–6 px; todos los valores se redondean a píxeles enteros al confirmarse. Chromium y Safari respetan el ancho en píxeles y los colores mediante los pseudoelementos ::-webkit-scrollbar, mientras que Firefox solo atiende scrollbar-width y scrollbar-color, así que conviene comprobar el resultado en ambos motores antes de publicarlo: la vista previa muestra el navegador que estás usando.
Todo ocurre en la página: después de cargar, cambiar preajustes, escribir un ancho, elegir un color, copiar y restablecer no se produjo ninguna petición de red en las pruebas en en, fr y ja, y la página no registró errores de consola. El diseño se mantiene dentro de la ventana de 320 px a 1360 px de ancho, sin desplazamiento horizontal.



    

        
Herramientas recientes: