Generador de scrollbar CSS personalizada
Ajusta color, grosor y redondeo para generar el CSS de una barra de desplazamiento a medida
Herramienta para transformar la sosa barra de desplazamiento por defecto del navegador en un elemento que encaje con el diseño de tu web. Ajusta con deslizadores y selectores de color el color del pulgar (thumb) y de la pista, el grosor y el redondeo de las esquinas, y verás el resultado al instante en el área de vista previa. Todo el cálculo ocurre dentro de tu navegador, así que obtienes el código CSS al momento sin que se envíe nada a ningún servidor.
도구를 불러오는 중…
🔒 Todo se procesa 100 % en tu navegador. Tus archivos y datos nunca se suben a ningún servidor.
Cómo usar
- Elige el color del pulgar y el de la pista (fondo) con el selector de color o escribiendo el HEX.
- Mueve los deslizadores de grosor y redondeo hasta conseguir la forma de scrollbar que buscas.
- Desplaza tú mismo la caja de vista previa para comprobar cómo queda aplicado de verdad.
- Pulsa el botón 'Copiar CSS' y pega el código resultante en la hoja de estilos de tu proyecto.
Preguntas frecuentes
- ¿El CSS generado funciona en todos los navegadores?
- Sí. Se genera tanto la sintaxis del pseudoelemento ::-webkit-scrollbar de los navegadores basados en WebKit (Chrome, Safari, Edge) como las propiedades estándar scrollbar-color y scrollbar-width de Firefox, así que funciona en ambos motores de renderizado.
- ¿Dónde tengo que aplicar el CSS generado?
- Cambia la clase .custom-scrollbar del principio del código por la clase del elemento que quieras y asígnasela: el estilo solo afectará al área desplazable de ese elemento.
- ¿Se envían mis datos a algún servidor?
- No. La selección de colores y la generación del CSS se procesan al instante dentro del navegador y ningún dato sale de tu equipo.