Crea barre di scorrimento CSS personalizzate

Progetta barre di scorrimento belle e moderne che si adattano allo stile del tuo sito web con il nostro generatore intuitivo. Non sono richieste competenze di programmazione!

Inizia a personalizzare Visualizza esempi

Pannello di controllo

8px
0px

Preview

Contenuto di anteprima della barra di scorrimento

Si tratta di un'area dimostrativa per la barra di scorrimento personalizzata. Regola le impostazioni a sinistra per vedere le modifiche in tempo reale.

Feature 1

Barre di scorrimento completamente personalizzabili per siti Web e applicazioni moderne.

Feature 2

Supporto cross-browser con prefisso automatico per diversi browser.

Esempio di contenuto di testo lungo: 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.

Altri contenuti testuali: 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. Mecenate 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. Aenean magna nisl, mollis quis, molestie eu, feugiat in, orci. In hac habitasse platea dictumst.

Fine del testo: 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?

Codice CSS generato

Copiato negli appunti!

Funzionalità potenti

Completamente personalizzabile

Regola ogni aspetto della barra di scorrimento, inclusi larghezza, colori, raggio e bordi per adattarlo perfettamente al design del tuo sito web.

Supporto cross-browser

Genera codice CSS che funzioni su tutti i browser moderni, tra cui Chrome, Firefox, Safari ed Edge.

Preset pronti all'uso

Inizia con progetti professionali utilizzando la nostra raccolta curata di preset della barra di scorrimento per una rapida implementazione.

Anteprima in tempo reale

Guarda esattamente come apparirà la tua barra di scorrimento mentre apporti le regolazioni con il nostro pannello di anteprima interattivo.

Ottieni un codice CSS minimale e ben formattato, pronto per essere integrato nel tuo progetto senza alcun appesantimento.

Design reattivo

Crea barre di scorrimento che si adattano perfettamente a diverse dimensioni dello schermo e dispositivi per un'esperienza utente coerente.

Come si usa

1

Personalizza la tua barra di scorrimento

Usa il pannello di controllo per regolare la larghezza, i colori, il raggio e altre proprietà della barra di scorrimento fino a quando non corrisponde alla tua visione del progetto.

2

Copia il CSS generato

Una volta che sei soddisfatto dell'anteprima, fai clic sul pulsante "Copia CSS" per copiare il codice generato negli appunti.

3

Aggiungi al tuo progetto

Incolla il codice CSS nel foglio di stile del tuo progetto o usalo in linea. Applica la classe a qualsiasi elemento per vedere la barra di scorrimento personalizzata in azione.

Esempi di barra di scorrimento

Esempio di una moderna barra di scorrimento blu con angoli arrotondati. Perfetto per siti Web e applicazioni aziendali.

Questa barra di scorrimento utilizza una traccia azzurra con un pollice blu più scuro che cambia colore al passaggio del mouse.

Scorri verso il basso per vedere l'effetto completo. Il pollice ha un raggio di 5 px per bordi arrotondati e lisci.

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

Blu moderno

Un'elegante barra di scorrimento blu con bordi arrotondati

Esempio di una barra di scorrimento scura sottile con uno stile minimo. Ideale per siti web ricchi di contenuti.

Questa barra di scorrimento utilizza una traccia grigio molto chiaro con un pollice grigio medio che si scurisce al passaggio del mouse.

Scorri verso il basso per vedere l'effetto completo. Il pollice ha un leggero raggio di 3 px per bordi morbidi.

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

Scuro sottile

Una barra di scorrimento scura minimalista per i siti di contenuti

Esempio di barra di scorrimento verde vivace con uno stile audace. Ottimo per siti Web ecologici o relativi alla salute.

Questa barra di scorrimento utilizza una traccia verde chiaro con un pollice verde vivido che si scurisce al passaggio del mouse.

Scorri verso il basso per vedere l'effetto completo. Il pollice ha un raggio di 6 px per bordi arrotondati pronunciati.

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

Verde vibrante

Una barra di scorrimento verde audace per i siti a tema ecologico

Esempio di un'elegante barra di scorrimento viola con un design moderno. Perfetto per siti web creativi o portfolio.

Questa barra di scorrimento utilizza una traccia viola chiaro con un pollice viola più profondo che si scurisce al passaggio del mouse.

Scorri verso il basso per vedere l'effetto completo. Il pollice ha un raggio di 4 px per bordi arrotondati e puliti.

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

Viola alla moda

Una moderna barra di scorrimento viola per progetti creativi

Domande frequenti

Related Tools

Meno in CSS Converter

Trasforma il tuo codice Less in CSS. Veloce, facile e sicuro.

Generatore di transizioni CSS3

Transizione di opacità uniforme

Minimizzatore CSS

Comprimi e ottimizza il tuo codice CSS con precisione professionale

Convertitore da numeri romani a numeri

Converti i numeri romani nei loro equivalenti numerici con una spiegazione passo passo

Da decimale a ottale

Converti i numeri decimali in ottali senza sforzo

Convertitore da JSON a Base64

Codifica i tuoi dati JSON in formato Base64 in modo sicuro ed efficiente