Skip to main content
Penguin ToolsStrumenti Pinguino

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).

🔗Strumenti correlati

🎨
Strumenti design

Convertitore codici colore

Converti tra codici colore HEX, RGB e HSL. Usa il selettore di colore e l'anteprima in tempo reale per una selezione intuitiva dei colori.

🎨
Strumenti design

Selettore di Colori

Scegli colori in modo intuitivo usando una ruota cromatica e cursori. Ottieni e copia codici colore in formato HEX, RGB e HSL.

🎨
Strumenti design

Estrattore Colori Immagine

Rileva automaticamente i colori dominanti di un'immagine e genera una palette di colori. Puoi anche cliccare in qualsiasi punto dell'immagine per selezionare singoli colori.

🎯
Strumenti design

Selettore Colore Medio Immagine

Calcola il colore medio di un'intera immagine o di un'area selezionata. Utile per scegliere schemi di colori o colori di sfondo per miniature.

🌈
Strumenti design

Generatore CSS Gradiente

Crea visivamente gradienti CSS con controlli a trascinamento. Supporta gradienti lineari, radiali e conici con preimpostazioni.

🔲
Strumenti design

Generatore CSS Box Shadow

Crea visivamente CSS box-shadow con cursori. Supporta ombre multiple e ombre interne (inset).