Générateur de scrollbar CSS personnalisée

Remplacez la barre de défilement grise par défaut par une version aux couleurs de votre site : ajustez largeur, couleurs et arrondis, prévisualisez en direct, puis copiez le code CSS prêt à l'emploi. Tout est calculé localement dans votre navigateur.

Exemples :

Largeur : 10px

Arrondi : 8px

Couleur de piste

Couleur du curseur

Couleur au survol

Ligne de contenu défilant n°1 — faites défiler pour voir la barre.

Ligne de contenu défilant n°2 — faites défiler pour voir la barre.

Ligne de contenu défilant n°3 — faites défiler pour voir la barre.

Ligne de contenu défilant n°4 — faites défiler pour voir la barre.

Ligne de contenu défilant n°5 — faites défiler pour voir la barre.

Ligne de contenu défilant n°6 — faites défiler pour voir la barre.

Ligne de contenu défilant n°7 — faites défiler pour voir la barre.

Ligne de contenu défilant n°8 — faites défiler pour voir la barre.

Ligne de contenu défilant n°9 — faites défiler pour voir la barre.

Ligne de contenu défilant n°10 — faites défiler pour voir la barre.

Ligne de contenu défilant n°11 — faites défiler pour voir la barre.

Ligne de contenu défilant n°12 — faites défiler pour voir la barre.

L'aperçu utilise les propriétés ::-webkit-scrollbar (Chrome, Edge, Safari) et scrollbar-color (Firefox) ; le rendu peut légèrement varier selon votre navigateur.

Code CSS

.byteryo-custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #8b5cf6 #1e1e2e;
}

.byteryo-custom-scrollbar::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.byteryo-custom-scrollbar::-webkit-scrollbar-track {
  background: #1e1e2e;
  border-radius: 8px;
}

.byteryo-custom-scrollbar::-webkit-scrollbar-thumb {
  background: #8b5cf6;
  border-radius: 8px;
}

.byteryo-custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #a78bfa;
}

Comment ça marche

Il n'existe pas une seule propriété CSS standard pour styliser une barre de défilement : les navigateurs basés sur Chromium (Chrome, Edge, Safari) utilisent les pseudo-éléments ::-webkit-scrollbar, tandis que Firefox utilise les propriétés scrollbar-width et scrollbar-color. Cet outil génère les deux en même temps, dans un bloc CSS scopé à une classe, pour que le résultat s'applique uniquement au conteneur que vous ciblez plutôt qu'à toute la page.

Comment appliquer ce code à mon propre conteneur ?

Copiez le CSS généré, renommez la classe byteryo-custom-scrollbar selon votre convention de nommage, puis ajoutez cette classe à l'élément HTML dont vous souhaitez personnaliser la barre de défilement (une div avec overflow: auto ou overflow: scroll, par exemple).

Le rendu sera-t-il identique sur tous les navigateurs ?

Non : Firefox n'accepte que la largeur (fine ou automatique) et les couleurs via scrollbar-color, sans arrondi ni couleur au survol séparée, alors que les navigateurs basés sur Chromium permettent un contrôle plus fin. Le code généré couvre le meilleur rendu possible sur chaque moteur, mais un léger écart visuel entre navigateurs reste normal.

Le code CSS est composé entièrement dans votre navigateur : aucune donnée n'est envoyée à un serveur pendant la génération.