Diseña barras de desplazamiento

hermosas y modernas que coincidan con el estilo de tu sitio web con nuestro generador intuitivo. ¡No se requieren habilidades de codificación!

Empezar a Ejemplos

Panel

8px
0px

Preview

de desplazamiento Vista previa del contenido

Esta es un área de demostración para la barra de desplazamiento personalizada. Ajuste la configuración de la izquierda para ver los cambios en tiempo real.

Feature 1

Barras de desplazamiento totalmente personalizables para sitios web y aplicaciones modernas.

Feature 2

Cruz-Soporte de navegador con prefijo automático para diferentes navegadores.

Ejemplo de contenido de texto largo: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Más contenido del texto: Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula. Donec lobortis risus a elit. Etiam tempor. Ut ullamcorper, ligula eu tempor congue, eros est euismod turpis, id tincidunt sapien risus a quam. Maecenas fermentum consequat mi. Donec fermentum. Pellentesque malesuada nulla a mi. Duis sapien sem, aliquet nec, commodo eget, consequat quis, neque. Aliquam faucibus, elit ut dictum aliquet, felis nisl adipiscing sapien, sed malesuada diam lacus eget erat. Cras mollis scelerisque nunc. Nullam arcu. Aliquam consequat. Curabitur augue lorem, dapibus quis, laoreet et, pretium ac, nisi. Enea magna nisl, mollis quis, molestie eu, feugiat in, orci. In hac habitasse platea dictumst.

Fin del texto: Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

¡Código

copiado al portapapeles!

Funciones

Totalmente personalizable

Ajuste todos los aspectos de su barra de desplazamiento, incluidos el ancho, los colores, el radio y los bordes, para que coincida perfectamente con el diseño de su sitio web.

Genere

código CSS que funcione en todos los navegadores modernos, incluidos Chrome, Firefox, Safari y Edge.

Comience

con diseños profesionales utilizando nuestra colección seleccionada de ajustes preestablecidos de barra de desplazamiento para una implementación rápida.

Vista previa

Vea exactamente cómo se verá su barra de desplazamiento a medida que realiza ajustes con nuestro panel de vista previa interactivo.

un código CSS mínimo y bien formateado que esté listo para integrarse en su proyecto sin ningún tipo de hinchazón.

responsivo

Cree barras de desplazamiento que se adapten perfectamente a diferentes tamaños de pantalla y dispositivos para una experiencia de usuario consistente.

Cómo usar

1

Usa

el panel de control para ajustar el ancho, los colores, el radio y otras propiedades de la barra de desplazamiento hasta que coincida con tu visión de diseño.

2

Una

vez que estés satisfecho con la vista previa, haz clic en el botón "Copiar CSS" para copiar el código generado en tu portapapeles.

3

Agrega a tu proyecto

Pega el código CSS en la hoja de estilo de tu proyecto o úsalo en línea. Aplica la clase a cualquier elemento para ver tu barra de desplazamiento personalizada en acción.

Ejemplos

de barra de desplazamiento Ejemplo de una barra de desplazamiento azul moderna con esquinas redondeadas. Perfecto para sitios web y aplicaciones corporativas.

Esta barra de desplazamiento utiliza una pista azul claro con un pulgar azul más oscuro que cambia de color al pasar el mouse.

Desplázate hacia abajo para ver el efecto completo. El pulgar tiene un radio de 5px para bordes redondeados suaves.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

Azul

Una elegante barra de desplazamiento azul con bordes

Ejemplo de una barra de desplazamiento oscura sutil con un estilo mínimo. Ideal para sitios web con mucho contenido.

Esta barra de desplazamiento utiliza una pista de color gris muy claro con un pulgar de color gris medio que se oscurece al pasar el ratón.

Desplázate hacia abajo para ver el efecto completo. El pulgar tiene un ligero radio de 3px para bordes suaves.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

Subtle Dark

Una barra de desplazamiento oscura minimalista para sitios

de contenido Ejemplo de una barra de desplazamiento verde vibrante con un estilo atrevido. Ideal para sitios web ecológicos o relacionados con la salud.

Esta barra de desplazamiento utiliza una pista de color verde claro con un pulgar verde vivo que se oscurece al pasar el mouse.

Desplázate hacia abajo para ver el efecto completo. El pulgar tiene un radio de 6px para bordes redondeados pronunciados.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

Verde

Una barra de desplazamiento verde audaz para sitios

Ejemplo de una elegante barra de desplazamiento púrpura con diseño moderno. Perfecto para sitios web creativos o de portafolio.

Esta barra de desplazamiento utiliza una pista de color púrpura claro con un pulgar de color púrpura más oscuro que se oscurece al pasar el mouse.

Desplázate hacia abajo para ver el efecto completo. El pulgar tiene un radio de 4px para bordes redondeados limpios.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

Stylish Purple

Una barra de desplazamiento morada moderna para proyectos

Preguntas

Related Tools

Generador de transiciones CSS3

Transición de opacidad suave

Crea hermosos degradados CSS sin esfuerzo

Genera impresionantes degradados lineales, radiales y cónicos con nuestra interfaz intuitiva. Copia el código CSS y utilízalo en tus proyectos al instante.

Convertidor de Less a CSS

Transforme su código Less en CSS. Rápido, fácil y seguro.

Calculadora CPM

Calcule el coste por mil (CPM) de sus campañas publicitarias con nuestra calculadora fácil de usar.

Convertir ángulos con precisión

Convierte sin esfuerzo entre diferentes unidades angulares con nuestra intuitiva herramienta de conversión. Perfecta para ingenieros, estudiantes y profesionales.

De CMYK a RGB

Convierta valores de color CMYK a RGB para aplicaciones digitales.