Generador de Scrollbars Personalizados

Crea barras de desplazamiento personalizadas usando CSS moderno con vista previa en tiempo real

Configuración

Ancho de Scrollbar

Color del Thumb (Deslizador)

Color del Track (Fondo)

Color al Pasar el Ratón

Radio de Borde: 10px

Incluir estilos WebKit (Chrome, Safari, Edge)

Temas Predefinidos

Vista Previa

Desplaza para ver el scrollbar

Este es un contenedor de ejemplo con contenido suficiente para generar barras de desplazamiento. Puedes desplazarte vertical y horizontalmente para ver cómo se ve tu scrollbar personalizado.

Línea de ejemplo 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Línea de ejemplo 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Línea de ejemplo 3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Línea de ejemplo 4 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Línea de ejemplo 5 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Línea de ejemplo 6 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Línea de ejemplo 7 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Línea de ejemplo 8 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Línea de ejemplo 9 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Línea de ejemplo 10 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Línea de ejemplo 11 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Línea de ejemplo 12 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Línea de ejemplo 13 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Línea de ejemplo 14 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Línea de ejemplo 15 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Contenido horizontal muy largo para generar scroll horizontal →→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→

Código CSS Generado

/* Scrollbar personalizado */
.custom-scrollbar {
  scrollbar-width: auto;
  scrollbar-color: #888888 #f1f1f1;
}

/* Para navegadores WebKit (Chrome, Safari, Edge) */
.custom-scrollbar::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #888888;
  border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #555555;
}

Compatibilidad

• scrollbar-color & scrollbar-width: Firefox 64+, Chrome 121+, Safari 17.4+
• ::-webkit-scrollbar: Chrome, Safari, Edge, Opera
• Firefox no soporta estilos WebKit avanzados

Cómo usar

Personaliza tu scrollbar usando los controles de la izquierda
Observa los cambios en tiempo real en la vista previa de la derecha
Copia el código CSS generado y añádelo a tu archivo de estilos
Aplica la clase .custom-scrollbar a cualquier elemento con scroll

Propiedades CSS Modernas

scrollbar-width: Define el grosor del scrollbar (auto, thin, none)
scrollbar-color: Define los colores del thumb y track en una sola propiedad
::-webkit-scrollbar: Pseudoelementos para mayor personalización en navegadores WebKit

Consejos

Asegúrate de que haya suficiente contraste entre el thumb y el track para la accesibilidad
Usa scrollbar-width: thin para interfaces minimalistas
Prueba tu scrollbar tanto en modo claro como oscuro
Los estilos WebKit permiten mayor personalización pero no funcionan en Firefox

Personaliza tu scrollbar usando los controles de la izquierda
Observa los cambios en tiempo real en la vista previa de la derecha
Copia el código CSS generado y añádelo a tu archivo de estilos
Aplica la clase .custom-scrollbar a cualquier elemento con scroll

Propiedades CSS Modernas

scrollbar-width: Define el grosor del scrollbar (auto, thin, none)
scrollbar-color: Define los colores del thumb y track en una sola propiedad
::-webkit-scrollbar: Pseudoelementos para mayor personalización en navegadores WebKit

Consejos

Asegúrate de que haya suficiente contraste entre el thumb y el track para la accesibilidad
Usa scrollbar-width: thin para interfaces minimalistas
Prueba tu scrollbar tanto en modo claro como oscuro
Los estilos WebKit permiten mayor personalización pero no funcionan en Firefox