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.

1.061 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.

Comentarios

Aún no hay comentarios — ¡sé el primero en escribir uno!

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