Générateur de barre de défilement CSS
Personnalisez le design de la barre de défilement CSS avec un éditeur visuel. Ajustez la couleur, la largeur, le rayon de bordure et copiez le code directement.
/* 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;
}Contenu à défiler #1 - Prévisualisez votre barre de défilement personnalisée. Défilez pour la voir en action.
Contenu à défiler #2 - Prévisualisez votre barre de défilement personnalisée. Défilez pour la voir en action.
Contenu à défiler #3 - Prévisualisez votre barre de défilement personnalisée. Défilez pour la voir en action.
Contenu à défiler #4 - Prévisualisez votre barre de défilement personnalisée. Défilez pour la voir en action.
Contenu à défiler #5 - Prévisualisez votre barre de défilement personnalisée. Défilez pour la voir en action.
Contenu à défiler #6 - Prévisualisez votre barre de défilement personnalisée. Défilez pour la voir en action.
Contenu à défiler #7 - Prévisualisez votre barre de défilement personnalisée. Défilez pour la voir en action.
Contenu à défiler #8 - Prévisualisez votre barre de défilement personnalisée. Défilez pour la voir en action.
Contenu à défiler #9 - Prévisualisez votre barre de défilement personnalisée. Défilez pour la voir en action.
Contenu à défiler #10 - Prévisualisez votre barre de défilement personnalisée. Défilez pour la voir en action.
Contenu à défiler #11 - Prévisualisez votre barre de défilement personnalisée. Défilez pour la voir en action.
Contenu à défiler #12 - Prévisualisez votre barre de défilement personnalisée. Défilez pour la voir en action.
Contenu à défiler #13 - Prévisualisez votre barre de défilement personnalisée. Défilez pour la voir en action.
Contenu à défiler #14 - Prévisualisez votre barre de défilement personnalisée. Défilez pour la voir en action.
Contenu à défiler #15 - Prévisualisez votre barre de défilement personnalisée. Défilez pour la voir en action.
Contenu à défiler #16 - Prévisualisez votre barre de défilement personnalisée. Défilez pour la voir en action.
Contenu à défiler #17 - Prévisualisez votre barre de défilement personnalisée. Défilez pour la voir en action.
Contenu à défiler #18 - Prévisualisez votre barre de défilement personnalisée. Défilez pour la voir en action.
Contenu à défiler #19 - Prévisualisez votre barre de défilement personnalisée. Défilez pour la voir en action.
Contenu à défiler #20 - Prévisualisez votre barre de défilement personnalisée. Défilez pour la voir en action.
Contenu à défiler #21 - Prévisualisez votre barre de défilement personnalisée. Défilez pour la voir en action.
Contenu à défiler #22 - Prévisualisez votre barre de défilement personnalisée. Défilez pour la voir en action.
Contenu à défiler #23 - Prévisualisez votre barre de défilement personnalisée. Défilez pour la voir en action.
Contenu à défiler #24 - Prévisualisez votre barre de défilement personnalisée. Défilez pour la voir en action.
Contenu à défiler #25 - Prévisualisez votre barre de défilement personnalisée. Défilez pour la voir en action.
Contenu à défiler #26 - Prévisualisez votre barre de défilement personnalisée. Défilez pour la voir en action.
Contenu à défiler #27 - Prévisualisez votre barre de défilement personnalisée. Défilez pour la voir en action.
Contenu à défiler #28 - Prévisualisez votre barre de défilement personnalisée. Défilez pour la voir en action.
Contenu à défiler #29 - Prévisualisez votre barre de défilement personnalisée. Défilez pour la voir en action.
Contenu à défiler #30 - Prévisualisez votre barre de défilement personnalisée. Défilez pour la voir en action.
Comment utiliser
Définir le style
Définissez la largeur, les couleurs, le rayon de bordure, etc. de la barre de défilement
Aperçu
Vérifiez l'apparence de la barre de défilement dans l'aperçu en temps réel
Copier le CSS
Copiez le code CSS généré
Fonctionnalités
Aperçu en temps réel
Prévisualisez la barre de défilement en temps réel lors des modifications
Support multi-navigateurs
Génère automatiquement le CSS pour WebKit et Firefox
États survol et actif
Personnalisez individuellement les styles des états survol et clic
FAQ
🔗Outils associés
Convertisseur de codes couleur
Convertissez entre les codes couleur HEX, RGB et HSL. Utilisez le sélecteur de couleur et l'aperçu en temps réel pour une sélection intuitive.
Sélecteur de couleur
Choisissez des couleurs intuitivement avec un cercle chromatique et des curseurs. Obtenez et copiez les codes couleur aux formats HEX, RGB et HSL.
Extracteur de couleurs d'image
Détectez automatiquement les couleurs dominantes d'une image et générez une palette de couleurs. Vous pouvez aussi cliquer n'importe où sur l'image pour sélectionner des couleurs individuelles.
Sélecteur de couleur moyenne d'image
Calculez la couleur moyenne d'une image entière ou d'une zone sélectionnée. Utile pour choisir des palettes de couleurs ou des couleurs d'arrière-plan de vignettes.
Générateur de dégradés CSS
Créez visuellement des dégradés CSS avec des contrôles par glissement. Prise en charge des dégradés linéaires, radiaux et coniques avec préréglages.
Générateur CSS Box Shadow
Créez visuellement des box-shadow CSS avec des curseurs. Prise en charge des ombres multiples et des ombres intérieures.