Generador de Scrollbar CSS - Estilos Personalizados en Línea
Diseña estilos de scrollbar CSS personalizados con controles visuales y vista previa en vivo. Genera código CSS de scrollbar WebKit y estándar al instante — 100% del lado del cliente, sin envío de datos al servidor.
Preguntas Frecuentes
¿Qué es un generador de barras de desplazamiento CSS?
Un generador de barras de desplazamiento CSS es una herramienta visual que te ayuda a crear estilos personalizados de barras de desplazamiento para tu sitio web usando CSS. En lugar de escribir manualmente reglas complejas de pseudo-elementos CSS, puedes ajustar colores, dimensiones y propiedades de borde con controles visuales y obtener código CSS listo para producción al instante. Soporta tanto las propiedades estándar scrollbar-color/scrollbar-width como los pseudo-elementos específicos de WebKit como ::-webkit-scrollbar.
¿Cómo uso este generador de barras de desplazamiento CSS?
1. Elige tu modo de salida: Solo WebKit, Solo Estándar o Ambos (recomendado). 2. Establece el ancho de la barra de desplazamiento usando el control deslizante. 3. Elige colores para el track (fondo) y el thumb (control). 4. Opcionalmente ajusta el radio de borde, bordes y colores de estados hover/activo. 5. Ve los cambios en vivo en el panel de vista previa. 6. Copia el código CSS generado y pégalo en tu hoja de estilos.
¿Cuál es la diferencia entre WebKit y CSS estándar para barras de desplazamiento?
Las propiedades estándar (scrollbar-color, scrollbar-width) son parte de la especificación oficial de CSS y funcionan en todos los navegadores modernos (Chrome 121+, Firefox 64+, Safari 26.2+, Edge 121+). Ofrecen control simple de color y ancho. Los pseudo-elementos WebKit (::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb) no son estándar pero ofrecen control más granular sobre radio de borde, bordes, estados hover y estilizado de partes individuales. Importante: si ambos están establecidos, las propiedades estándar anulan el estilizado WebKit.
¿Las propiedades CSS estándar de barras de desplazamiento son compatibles con todos los navegadores?
Sí. A partir de diciembre de 2025, scrollbar-color y scrollbar-width han alcanzado el estado Baseline Newly Available, lo que significa que son compatibles con Chrome, Firefox, Safari y Edge. Para la personalización más detallada (radio de borde, bordes, estados hover), es posible que desees incluir pseudo-elementos WebKit como mejora.
¿Están seguros mis datos al usar esta herramienta?
Sí. Esta herramienta se ejecuta completamente en tu navegador. No se envía código CSS, valores de color ni ningún otro dato a ningún servidor. Todo el procesamiento ocurre del lado del cliente, garantizando total privacidad y seguridad.
¿Puedo estilizar barras de desplazamiento de manera diferente para distintos elementos?
Sí. El CSS generado usa pseudo-elementos que pueden tener alcance a elementos específicos. En lugar de aplicar estilos globalmente, puedes prefijar los selectores con un nombre de clase (por ejemplo, .my-container::-webkit-scrollbar) para estilizar solo las barras de desplazamiento dentro de ese elemento específico.
¿Cómo hago las barras de desplazamiento accesibles?
Al estilizar barras de desplazamiento, asegúrate de que el thumb tenga al menos una relación de contraste de color 3:1 contra el track (guía WCAG 2.0). Evita hacer las barras de desplazamiento demasiado delgadas (menos de 8px) ya que reduce la usabilidad para entrada táctil. Nunca ocultes las barras de desplazamiento (scrollbar-width: none) a menos que proporciones un indicador alternativo de desplazamiento, ya que esto perjudica la usabilidad para usuarios que dependen de barras de desplazamiento visibles.
Ejemplos de Código
// Generate CSS scrollbar styles from configuration
function generateScrollbarCSS(config) {
const {
width = 12,
trackColor = '#f1f1f1',
thumbColor = '#888888',
thumbHoverColor = '#555555',
thumbBorderRadius = 6,
trackBorderRadius = 0
} = config;
// Standard CSS (all modern browsers)
const standardCSS = [
'/* Standard scrollbar properties (Chrome 121+, Firefox 64+, Safari 26.2+) */',
'.custom-scrollbar {',
` scrollbar-width: ${width <= 6 ? 'thin' : 'auto'};`,
` scrollbar-color: ${thumbColor} ${trackColor};`,
'}'
].join('\n');
// WebKit CSS (Chrome, Safari, Edge - enhanced styling)
const webkitCSS = [
'/* WebKit scrollbar styling (Chrome, Safari, Edge) */',
'.custom-scrollbar::-webkit-scrollbar {',
` width: ${width}px;`,
` height: ${width}px;`,
'}',
'',
'.custom-scrollbar::-webkit-scrollbar-track {',
` background: ${trackColor};`,
` border-radius: ${trackBorderRadius}px;`,
'}',
'',
'.custom-scrollbar::-webkit-scrollbar-thumb {',
` background: ${thumbColor};`,
` border-radius: ${thumbBorderRadius}px;`,
'}',
'',
'.custom-scrollbar::-webkit-scrollbar-thumb:hover {',
` background: ${thumbHoverColor};`,
'}'
].join('\n');
return { standardCSS, webkitCSS, combined: `${standardCSS}\n\n${webkitCSS}` };
}
// Usage
const css = generateScrollbarCSS({
width: 10,
trackColor: '#f0f0f0',
thumbColor: '#6366f1',
thumbHoverColor: '#4f46e5',
thumbBorderRadius: 5,
trackBorderRadius: 5
});
console.log(css.combined);