Skip to main content

Generatore scrollbar CSS

Personalizza il design della scrollbar CSS con un editor visuale. Regola colore, larghezza, raggio del bordo e copia il codice direttamente.

/* 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;
}

Contenuto scorrevole #1 - Visualizza la tua scrollbar personalizzata. Scorri per vederla in azione.

Contenuto scorrevole #2 - Visualizza la tua scrollbar personalizzata. Scorri per vederla in azione.

Contenuto scorrevole #3 - Visualizza la tua scrollbar personalizzata. Scorri per vederla in azione.

Contenuto scorrevole #4 - Visualizza la tua scrollbar personalizzata. Scorri per vederla in azione.

Contenuto scorrevole #5 - Visualizza la tua scrollbar personalizzata. Scorri per vederla in azione.

Contenuto scorrevole #6 - Visualizza la tua scrollbar personalizzata. Scorri per vederla in azione.

Contenuto scorrevole #7 - Visualizza la tua scrollbar personalizzata. Scorri per vederla in azione.

Contenuto scorrevole #8 - Visualizza la tua scrollbar personalizzata. Scorri per vederla in azione.

Contenuto scorrevole #9 - Visualizza la tua scrollbar personalizzata. Scorri per vederla in azione.

Contenuto scorrevole #10 - Visualizza la tua scrollbar personalizzata. Scorri per vederla in azione.

Contenuto scorrevole #11 - Visualizza la tua scrollbar personalizzata. Scorri per vederla in azione.

Contenuto scorrevole #12 - Visualizza la tua scrollbar personalizzata. Scorri per vederla in azione.

Contenuto scorrevole #13 - Visualizza la tua scrollbar personalizzata. Scorri per vederla in azione.

Contenuto scorrevole #14 - Visualizza la tua scrollbar personalizzata. Scorri per vederla in azione.

Contenuto scorrevole #15 - Visualizza la tua scrollbar personalizzata. Scorri per vederla in azione.

Contenuto scorrevole #16 - Visualizza la tua scrollbar personalizzata. Scorri per vederla in azione.

Contenuto scorrevole #17 - Visualizza la tua scrollbar personalizzata. Scorri per vederla in azione.

Contenuto scorrevole #18 - Visualizza la tua scrollbar personalizzata. Scorri per vederla in azione.

Contenuto scorrevole #19 - Visualizza la tua scrollbar personalizzata. Scorri per vederla in azione.

Contenuto scorrevole #20 - Visualizza la tua scrollbar personalizzata. Scorri per vederla in azione.

Contenuto scorrevole #21 - Visualizza la tua scrollbar personalizzata. Scorri per vederla in azione.

Contenuto scorrevole #22 - Visualizza la tua scrollbar personalizzata. Scorri per vederla in azione.

Contenuto scorrevole #23 - Visualizza la tua scrollbar personalizzata. Scorri per vederla in azione.

Contenuto scorrevole #24 - Visualizza la tua scrollbar personalizzata. Scorri per vederla in azione.

Contenuto scorrevole #25 - Visualizza la tua scrollbar personalizzata. Scorri per vederla in azione.

Contenuto scorrevole #26 - Visualizza la tua scrollbar personalizzata. Scorri per vederla in azione.

Contenuto scorrevole #27 - Visualizza la tua scrollbar personalizzata. Scorri per vederla in azione.

Contenuto scorrevole #28 - Visualizza la tua scrollbar personalizzata. Scorri per vederla in azione.

Contenuto scorrevole #29 - Visualizza la tua scrollbar personalizzata. Scorri per vederla in azione.

Contenuto scorrevole #30 - Visualizza la tua scrollbar personalizzata. Scorri per vederla in azione.

Condividi strumento
📖

Come usare

Step 1

Imposta stile

Imposta stile

Imposta larghezza della scrollbar, colori, raggio del bordo, ecc.

Step 2

Anteprima

Anteprima

Controlla l'aspetto della scrollbar nell'anteprima in tempo reale

Step 3

Copia CSS

Copia CSS

Copia il codice CSS generato

Funzionalità

Anteprima in tempo reale

Visualizza la scrollbar in tempo reale mentre modifichi le impostazioni

Supporto cross-browser

Genera automaticamente CSS per WebKit e Firefox

Stati hover e attivo

Personalizza gli stili degli stati hover e di trascinamento individualmente

FAQ

Sì, usando ::-webkit-scrollbar (Chrome/Safari/Edge) e scrollbar-width/scrollbar-color (Firefox).