Generador de barras de desplazamiento CSS
Personaliza el diseño de barras de desplazamiento CSS con un editor visual. Ajusta color, ancho, radio de borde y copia el código directamente.
/* WebKit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
width: 12px;
height: 12px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 6px;
}
::-webkit-scrollbar-thumb {
background: #888888;
border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
background: #555555;
}
/* Firefox */
* {
scrollbar-width: auto;
scrollbar-color: #888888 #f1f1f1;
}Contenido de desplazamiento #1 - Previsualiza tu barra de desplazamiento personalizada. Desplázate para verla en acción.
Contenido de desplazamiento #2 - Previsualiza tu barra de desplazamiento personalizada. Desplázate para verla en acción.
Contenido de desplazamiento #3 - Previsualiza tu barra de desplazamiento personalizada. Desplázate para verla en acción.
Contenido de desplazamiento #4 - Previsualiza tu barra de desplazamiento personalizada. Desplázate para verla en acción.
Contenido de desplazamiento #5 - Previsualiza tu barra de desplazamiento personalizada. Desplázate para verla en acción.
Contenido de desplazamiento #6 - Previsualiza tu barra de desplazamiento personalizada. Desplázate para verla en acción.
Contenido de desplazamiento #7 - Previsualiza tu barra de desplazamiento personalizada. Desplázate para verla en acción.
Contenido de desplazamiento #8 - Previsualiza tu barra de desplazamiento personalizada. Desplázate para verla en acción.
Contenido de desplazamiento #9 - Previsualiza tu barra de desplazamiento personalizada. Desplázate para verla en acción.
Contenido de desplazamiento #10 - Previsualiza tu barra de desplazamiento personalizada. Desplázate para verla en acción.
Contenido de desplazamiento #11 - Previsualiza tu barra de desplazamiento personalizada. Desplázate para verla en acción.
Contenido de desplazamiento #12 - Previsualiza tu barra de desplazamiento personalizada. Desplázate para verla en acción.
Contenido de desplazamiento #13 - Previsualiza tu barra de desplazamiento personalizada. Desplázate para verla en acción.
Contenido de desplazamiento #14 - Previsualiza tu barra de desplazamiento personalizada. Desplázate para verla en acción.
Contenido de desplazamiento #15 - Previsualiza tu barra de desplazamiento personalizada. Desplázate para verla en acción.
Contenido de desplazamiento #16 - Previsualiza tu barra de desplazamiento personalizada. Desplázate para verla en acción.
Contenido de desplazamiento #17 - Previsualiza tu barra de desplazamiento personalizada. Desplázate para verla en acción.
Contenido de desplazamiento #18 - Previsualiza tu barra de desplazamiento personalizada. Desplázate para verla en acción.
Contenido de desplazamiento #19 - Previsualiza tu barra de desplazamiento personalizada. Desplázate para verla en acción.
Contenido de desplazamiento #20 - Previsualiza tu barra de desplazamiento personalizada. Desplázate para verla en acción.
Contenido de desplazamiento #21 - Previsualiza tu barra de desplazamiento personalizada. Desplázate para verla en acción.
Contenido de desplazamiento #22 - Previsualiza tu barra de desplazamiento personalizada. Desplázate para verla en acción.
Contenido de desplazamiento #23 - Previsualiza tu barra de desplazamiento personalizada. Desplázate para verla en acción.
Contenido de desplazamiento #24 - Previsualiza tu barra de desplazamiento personalizada. Desplázate para verla en acción.
Contenido de desplazamiento #25 - Previsualiza tu barra de desplazamiento personalizada. Desplázate para verla en acción.
Contenido de desplazamiento #26 - Previsualiza tu barra de desplazamiento personalizada. Desplázate para verla en acción.
Contenido de desplazamiento #27 - Previsualiza tu barra de desplazamiento personalizada. Desplázate para verla en acción.
Contenido de desplazamiento #28 - Previsualiza tu barra de desplazamiento personalizada. Desplázate para verla en acción.
Contenido de desplazamiento #29 - Previsualiza tu barra de desplazamiento personalizada. Desplázate para verla en acción.
Contenido de desplazamiento #30 - Previsualiza tu barra de desplazamiento personalizada. Desplázate para verla en acción.
Cómo usar
Configurar estilo
Configura el ancho, colores y radio de borde de la barra de desplazamiento
Vista previa
Verifica la apariencia de la barra de desplazamiento en la vista previa en tiempo real
Copiar CSS
Copia el código CSS generado
Características
Vista previa en tiempo real
Previsualiza la barra de desplazamiento en tiempo real mientras cambias los ajustes
Soporte multinavegador
Genera automáticamente CSS tanto para WebKit como para Firefox
Estados hover y activo
Personaliza los estilos de los estados hover y arrastre individualmente
FAQ
🔗Herramientas relacionadas
Convertidor de códigos de color
Convierte entre códigos de color HEX, RGB y HSL. Usa el selector de color y la vista previa en tiempo real para una selección intuitiva.
Selector de color
Selecciona colores de forma intuitiva usando una rueda de color y deslizadores. Obtén y copia códigos de color en formatos HEX, RGB y HSL.
Extractor de Colores de Imagen
Detecta automáticamente los colores dominantes de una imagen y genera una paleta de colores. También puedes hacer clic en cualquier parte de la imagen para seleccionar colores individuales.
Selector de Color Promedio de Imagen
Calcula el color promedio de una imagen completa o de un área seleccionada. Útil para elegir esquemas de color o colores de fondo de miniaturas.
Generador de degradados CSS
Crea degradados CSS visualmente con controles de arrastre. Admite tipos de degradado lineal, radial y cónico con preajustes.
Generador de CSS Box Shadow
Crea CSS box-shadow visualmente con deslizadores. Admite múltiples sombras y sombras interiores.