Estilizador de barra de desplazamiento CSS
Crea CSS de scrollbar personalizado ajustando color, grosor y radio
도구를 불러오는 중…
🔒 Todo se procesa 100 % en tu navegador. Tus archivos y datos nunca se suben a ningún servidor.
Esta herramienta te permite reemplazar la barra de desplazamiento predeterminada del navegador por un diseño acorde a tu sitio web. Ajusta los colores del control y la pista, el grosor y el radio de las esquinas con controles deslizantes y selectores de color, observa la vista previa actualizarse al instante y copia el CSS listo para usar, todo procesado localmente en tu navegador sin enviar datos a ningún servidor.
Cómo usar
- Elige el color del control (thumb) y de la pista (track) con los selectores de color o los campos HEX.
- Mueve los controles deslizantes de grosor y radio para dar forma a la barra como prefieras.
- Desplázate dentro del cuadro de vista previa para ver el resultado aplicado en tiempo real.
- Pulsa 'Copiar CSS' para obtener el código generado y pégalo en la hoja de estilos de tu proyecto.
Preguntas frecuentes
- ¿El CSS generado funciona en todos los navegadores?
- Sí. Combina los pseudoelementos ::-webkit-scrollbar usados por navegadores WebKit (Chrome, Safari, Edge) con las propiedades estándar scrollbar-color y scrollbar-width que admite Firefox.
- ¿Dónde debo aplicar el CSS generado?
- Cambia el nombre de la clase .custom-scrollbar del código por el del elemento que quieras estilizar; así el estilo se aplicará solo al área desplazable de ese elemento.
- ¿Se envían mis datos a un servidor?
- No. La selección de colores y la generación del CSS ocurren de forma instantánea en tu navegador, sin enviar información a ningún lugar.