6XC

Generador de Scrollbar CSS

Diseña una barra de desplazamiento personalizada con vista previa en vivo y copia el CSS — compatible con WebKit y Firefox.

738 visitas

Esta área es para probar tu scrollbar personalizada. Desplázate hacia abajo y observa cómo la barra de la derecha sigue tu diseño. Cambia colores y tamaños; el resultado se aplica a este cuadro al instante.

Esta área es para probar tu scrollbar personalizada. Desplázate hacia abajo y observa cómo la barra de la derecha sigue tu diseño. Cambia colores y tamaños; el resultado se aplica a este cuadro al instante.

Esta área es para probar tu scrollbar personalizada. Desplázate hacia abajo y observa cómo la barra de la derecha sigue tu diseño. Cambia colores y tamaños; el resultado se aplica a este cuadro al instante.

Esta área es para probar tu scrollbar personalizada. Desplázate hacia abajo y observa cómo la barra de la derecha sigue tu diseño. Cambia colores y tamaños; el resultado se aplica a este cuadro al instante.

Esta área es para probar tu scrollbar personalizada. Desplázate hacia abajo y observa cómo la barra de la derecha sigue tu diseño. Cambia colores y tamaños; el resultado se aplica a este cuadro al instante.

Esta área es para probar tu scrollbar personalizada. Desplázate hacia abajo y observa cómo la barra de la derecha sigue tu diseño. Cambia colores y tamaños; el resultado se aplica a este cuadro al instante.

¿Cómo se Personalizan las Scrollbars con CSS?

Existen dos mecanismos: los navegadores WebKit (Chrome, Edge, Safari) usan la familia de pseudoelementos ::-webkit-scrollbar, que permite personalizar el riel, el pulgar (thumb), el ancho y el radio; Firefox usa las propiedades estándar más simples scrollbar-color y scrollbar-width. El código generado incluye ambos, así que tu scrollbar se ve consistente en todas partes.

Ajusta colores, ancho y radio; el panel de vista previa a la derecha se desplaza con tu diseño aplicado, y el CSS se actualiza al instante.

Preguntas Frecuentes

¿Por qué mi scrollbar se ve diferente en Firefox?

Firefox ignora las reglas ::-webkit-scrollbar y solo respeta scrollbar-color (colores del pulgar y el riel) y scrollbar-width. El radio y los efectos hover son exclusivos de WebKit; Firefox muestra una versión simplificada.

¿Puedo personalizar la scrollbar de un solo elemento?

Sí — delimita los selectores: .mi-caja::-webkit-scrollbar { … } y .mi-caja { scrollbar-color: … }. Aplícalo a html o body (o usa los selectores simples de este generador) para toda la página.

¿Las scrollbars personalizadas funcionan en móvil?

En su mayoría no: iOS y la mayoría de navegadores Android usan scrollbars superpuestas que ignoran estos estilos. Trata las scrollbars personalizadas como una mejora de escritorio.

Herramientas Similares

Generador de Gradientes CSS Diseña gradientes CSS lineales, radiales y cónicos con vista previa en vivo y copia el código. Generar Generador de Sombra CSS (Box Shadow) Diseña una box-shadow de forma visual — desplazamientos, desenfoque, expansión, color, opacidad e inset — con vista previa en vivo. Generar Generador de Border Radius CSS Redondea cada esquina por separado o todas a la vez, en px o %, con vista previa en vivo y CSS copiable. Generar Generador de Sombra de Texto CSS Diseña un text-shadow con desplazamientos, desenfoque, color y opacidad — vista previa en vivo sobre texto de muestra. Generar