Generador de barras de desplazamiento CSS

Genera barras de desplazamiento CSS personalizadas visualmente. Personaliza el ancho, el color de la pista, el color del control deslizante, los bordes y el radio de borde con vista previa en tiempo real. Compatible con Chrome, Safari, Edge y Firefox.

Personalización

Ancho (Vertical) {{ scrollbarWidth }}px

Alto (Horizontal) {{ scrollbarHeight }}px

Altura mínima del control {{ thumbMinHeight }}px

Tamaño de Firefox

Color

Color al pasar el cursor

Color activo del control

Radio de borde {{ thumbRadius }}px

Grosor de borde

Estilo de borde

Color de borde

Color

Color al pasar por la pista

Color activo de la pista

Radio de borde {{ trackRadius }}px

Grosor de borde

Estilo de borde

Color de borde

Desenfoque de sombra (Blur) {{ shadowBlur }}px

Color de sombra

Opacidad de sombra {{ shadowOpacity }}%

Sombra interior (Inset)

Compatibilidad WebKit heredada

Incluir comentarios CSS

Vista previa en vivo

Área de vista previa deslizable

Esta es una zona de vista previa. Arrastra las barras para probar.

Ajusta las opciones a la izquierda y el diseño se actualizará al instante.

Compatible con Chrome/Safari/Edge (con bordes, sombras y hover) y Firefox.

Cuando termines, copia el código CSS.