Générateur de barre de défilement CSS personnalisée

Personnalisez une barre de défilement CSS (largeur, couleurs, arrondi) avec le code.

Ligne de démonstration 1

Ligne de démonstration 2

Ligne de démonstration 3

Ligne de démonstration 4

Ligne de démonstration 5

Ligne de démonstration 6

Ligne de démonstration 7

Ligne de démonstration 8

Ligne de démonstration 9

Ligne de démonstration 10

Ligne de démonstration 11

Ligne de démonstration 12

Ligne de démonstration 13

Ligne de démonstration 14

Ligne de démonstration 15

Ligne de démonstration 16

Ligne de démonstration 17

Ligne de démonstration 18

Ligne de démonstration 19

Ligne de démonstration 20

LargeurRailCurseurArrondi

▸CSS

/* Chrome, Edge, Safari */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0d1219; }
::-webkit-scrollbar-thumb { background: #39d353; border-radius: 8px; }
/* Firefox */
* { scrollbar-width: thin; scrollbar-color: #39d353 #0d1219; }

🔒 100 % côté client — aucune donnée envoyée

Concevez une barre de défilement CSS sur mesure (couleurs, largeur, arrondis) et copiez le code compatible navigateurs. Un aperçu vous montre le rendu instantanément. Tout est généré localement dans votre navigateur, sans envoi de données.

À quoi ça sert ?

▸ Assortir la scrollbar à la charte de votre site
▸ Styliser une zone de contenu défilante
▸ Générer le code webkit et standard en un clic
▸ Tester différentes couleurs avant intégration

FAQ

Le code est-il compatible avec tous les navigateurs ?

Il inclut les propriétés webkit et les standards pour une bonne compatibilité.

Puis-je régler la largeur et les couleurs ?

Oui, ajustez largeur, couleurs du rail et du curseur, et arrondis.

Mes réglages sont-ils envoyés à un serveur ?

Non, tout est calculé dans votre navigateur.