Generador de Scrollbar CSS

El Generador de Scrollbar CSS es una herramienta en línea gratuita que te permite personalizar el diseño de las barras de desplazamiento de tu sitio web y crear instantáneamente el código CSS necesario.
Simplemente opera los controles deslizantes y los selectores de color para ajustar los estilos del pulgar y la pista, como colores, ancho y radio del borde, mientras ves vistas previas en tiempo real.
El código generado es compatible no solo con navegadores WebKit como Chrome, Safari y Edge, sino que también es compatible con Firefox a través de scrollbar-color y scrollbar-width. Todo el procesamiento se completa dentro de tu navegador, haciéndolo seguro, rápido y gratuito, sin necesidad de instalación ni registro.

Prefijo WebKit (::-webkit-scrollbar)

Un pseudoelemento CSS no estándar utilizado para personalizar las barras de desplazamiento en navegadores impulsados por los motores WebKit/Blink, como Chrome, Safari y Edge. Permite diseños altamente personalizables.

Pista (Track)

El fondo o la ranura de la barra de desplazamiento. Puedes darle estilo usando ::-webkit-scrollbar-track para establecer su color de fondo o sombras interiores.

Pulgar (Thumb)

La parte arrastrable de la barra de desplazamiento que indica la posición de desplazamiento. Se le da estilo usando ::-webkit-scrollbar-thumb para ajustar su color y radio del borde.

scrollbar-color y scrollbar-width

Propiedades CSS estándar del W3C compatibles con navegadores como Firefox que no admiten prefijos WebKit. Permiten establecer los colores del pulgar y la pista y definir el ancho (auto, thin o none).

Compatibilidad Multiplataforma

La capacidad de un sitio web para funcionar y mostrarse de manera consistente en diferentes navegadores web (Chrome, Firefox, Safari, etc.). Nuestra herramienta genera código que funciona perfectamente en los principales navegadores.

Q.¿El CSS generado funcionará en smartphones?

Sí, funciona en navegadores móviles basados en WebKit como Safari en iOS y Chrome en Android. Sin embargo, dependiendo de las especificaciones del sistema operativo, es posible que la barra de desplazamiento solo aparezca mientras te desplazas.

Q.¿Puedo aplicar la barra de desplazamiento solo a un elemento específico (como un div)?

Sí, puedes. Simplemente reemplaza .custom-scrollbar en el código generado con la clase o ID de tu elemento específico (por ejemplo, .my-container o #scroll-box).

Q.¿Es compatible con el navegador Firefox?

Sí, lo es. Esta herramienta genera automáticamente no solo pseudoelementos de WebKit, sino también las propiedades estándar de W3C scrollbar-color y scrollbar-width para Firefox.

Q.¿Mis datos se guardan en un servidor al usar esta herramienta?

No, no se guardan. Esta herramienta se ejecuta completamente en tu navegador usando JavaScript, por lo que tus ajustes y código generado nunca se envían a servidores externos.

Q.¿Cómo puedo ocultar completamente la barra de desplazamiento?

Para ocultar la barra de desplazamiento manteniendo la funcionalidad de desplazamiento, puedes usar ::-webkit-scrollbar { display: none; } para WebKit y scrollbar-width: none; para Firefox.