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

Générez visuellement des barres de défilement CSS personnalisées. Personnalisez la largeur, la couleur de la piste, la couleur du curseur, les bordes et le rayon de bordure avec un aperçu en temps réel. Compatible avec Chrome, Safari, Edge et Firefox.

Personnalisation

Largeur (Verticale) {{ scrollbarWidth }}px

Hauteur (Horizontale) {{ scrollbarHeight }}px

Hauteur minimale du curseur {{ thumbMinHeight }}px

Taille de Firefox

Couleur

Couleur de survol

Couleur active du curseur

Rayon de bordure {{ thumbRadius }}px

Largeur de bordure

Style de bordure

Couleur de bordure

Couleur

Couleur de survol de la piste

Couleur active de la piste

Rayon de bordure {{ trackRadius }}px

Largeur de bordure

Style de bordure

Couleur de bordure

Flou de l'ombre (Blur) {{ shadowBlur }}px

Couleur de l'ombre

Opacité de l'ombre {{ shadowOpacity }}%

Ombre interne (Inset)

Compatibilité WebKit héritée

Inclure les commentaires CSS

Aperçu en direct

Zone d'aperçu défilable

Ceci est une zone d'aperçu de défilement. Vous pouvez faire glisser la barre à droite ou en bas pour tester.

Modifiez n'importe quel paramètre à gauche et regardez la mise à jour se faire instantanément.

Compatible Webkit (Chrome/Safari/Edge, avec bordures, ombres et survols) et Firefox.

Une fois satisfait, copiez le code CSS généré.