Personalizador de Barra de Desplazamiento CSS
Diseña barras de desplazamiento personalizadas con CSS. Ajusta el ancho, color de pista, color del pulgar, radio del borde y efectos hover. Vista previa en vivo y CSS listo para copiar.
Scrollbar
Width10px
Thumb Border Radius5px
Track Border Radius0px
Thumb Border0px
Colors
Track Color
#f1f1f1
Thumb Color
#888888
Thumb Hover
#555555
Thumb Border Color
#ffffff
Preview
CSS Code
/* WebKit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #888888;
border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
background: #555555;
}
/* Firefox */
* {
scrollbar-width: auto;
scrollbar-color: #888888 #f1f1f1;
}Cómo usar Personalizador de Barra de Desplazamiento CSS
- 1Ajusta el ancho de la barra de desplazamiento, el color de la pista y el color del pulgar.
- 2Personaliza el radio del borde y los efectos hover.
- 3Visualiza la barra de desplazamiento en contenido de ejemplo.
- 4Copia el código CSS para tu proyecto.
ZenovayAnalytics
Descubre qué hacen de verdad tus visitantes.
- Seguimiento de visitantes en tiempo real
- Privacidad primero, sin aviso de cookies
- Configurado en dos minutos
Herramientas relacionadas
Generador de Degradados CSS
Crea hermosos degradados CSS con un editor visual. Degradados lineales, radiales y cónicos.Generador de Sombra de Caja CSS
Diseña sombras de caja CSS con controles visuales. Ajusta desplazamiento, desenfoque, expansión y color.Generador de Borde Redondeado CSS
Crea valores de borde redondeado personalizados con controles visuales. Vincula o desvincula las esquinas para ajustes rápidos.Área de Juego CSS Flexbox
Aprende y genera diseños CSS Flexbox visualmente. Ajusta dirección, alineación, envoltura y espaciado en tiempo real.Preguntas frecuentes
¿Cómo diseño barras de desplazamiento con CSS?▾
Utiliza pseudo-elementos ::-webkit-scrollbar para Chrome/Safari/Edge, y propiedades scrollbar-width/scrollbar-color para Firefox. Este generador produce ambas sintaxis.
¿Qué navegadores admiten barras de desplazamiento personalizadas?▾
Chrome, Edge y Safari admiten ::-webkit-scrollbar (85%+ de usuarios). Firefox 64+ admite scrollbar-width y scrollbar-color. Cobertura combinada ~97%.
¿Puedo hacer las barras de desplazamiento transparentes?▾
Sí. Establece el ancho de la barra de desplazamiento a 0 y el fondo transparente para WebKit, o scrollbar-width: none para Firefox. El contenido sigue siendo desplazable.
¿Afecta el CSS personalizado de la barra de desplazamiento al rendimiento?▾
Impacto negligible. El estilo de la barra de desplazamiento se aplica una vez por elemento, no por fotograma. Incluso los estilos complejos no tienen efecto de rendimiento medible.
¿Debo usar una librería de barra de desplazamiento de JavaScript?▾
Se prefieren las barras de desplazamiento solo CSS. Las librerías JS añaden peso y pueden causar problemas de accesibilidad. Usa JS solo cuando CSS no pueda lograr tu diseño.