Générateur de barre de défilement CSS
Choisissez les couleurs et la forme et faites défiler la boîte d’exemple. Le code combine les nouvelles propriétés avec l’ancienne version de Chrome et de Safari.
Mode d’emploiBarre de défilement aux couleurs du site
Disponible en: 
Générateur de barre de défilement CSS: à quoi ça sert
Une barre de défilement aux couleurs de la marque donne une meilleure finition au site, mais le CSS a changé : il existe aujourd’hui les propriétés standard scrollbar-color et scrollbar-width, prises en charge par Firefox, Chrome et Edge 121 et Safari 26.2, tandis que les anciennes versions ne comprennent que ::-webkit-scrollbar.
Ce générateur compose les deux méthodes séparées par @supports, comme le recommande la documentation de Chrome, car lorsque scrollbar-color est définie, Chrome ignore les anciennes règles. Vous choisissez les couleurs de la piste et de la barre, la largeur, les coins et la couleur au survol, et testez dans la boîte d’exemple.
Mode d’emploi
- Choisissez les couleurs de la piste et de la barre.
- Réglez la largeur et les coins.
- Copiez le CSS pour toute la page ou pour une boîte.
Quand l’utiliser
- Barre de défilement aux couleurs de la marque.
- Boîtes défilantes dans la page.
- Tableaux de bord et systèmes à thème sombre.
Questions fréquentes
Cela fonctionne-t-il sur tous les navigateurs ?
Les propriétés standard scrollbar-color et scrollbar-width fonctionnent sur Firefox, Chrome et Edge à partir de la version 121 et sur Safari 26.2. Pour les versions antérieures, le code fournit aussi les règles ::-webkit-scrollbar, qui modifient la largeur, les coins et la couleur au survol.
Pourquoi le code utilise-t-il @supports ?
Dans Chrome, quand scrollbar-color est définie, les règles ::-webkit-scrollbar sont ignorées. @supports applique les propriétés standard uniquement là où elles existent et laisse les anciennes règles aux navigateurs qui ne les connaissent pas.
Personnaliser la barre nuit-il à l’accessibilité ?
Cela peut nuire si elle devient trop fine ou peu contrastée avec la piste. Gardez une largeur que l’on puisse saisir à la souris et une couleur qui se distingue du fond.
Vraiment gratuit ?
Oui, 100 % gratuit. Sans inscription, sans abonnement et sans limite d’utilisation. Tous les outils de Tools123 sont gratuits.