Générateur de dégradé linéaire CSS
Créez des dégradés CSS visuellement : type linéaire, radial ou conique, curseur d'angle et jusqu'à six arrêts de couleur avec un aperçu pleine largeur en direct et le code CSS à copier.
Entièrement traité dans votre navigateur — rien de ce que vous saisissez ici n'est jamais téléchargé.
Résultat
À propos de cet outil
Cette page ouvre le générateur de dégradés avec le type linéaire déjà sélectionné. Faites glisser le curseur d'angle pour faire pivoter le fondu, ajustez les arrêts de couleur, et l'aperçu pleine largeur ainsi que la ligne CSS se mettent à jour à chaque saisie.
linear-gradient() peint les couleurs le long d'une ligne droite — le dégradé le plus utilisé en CSS, de loin. 90deg va de gauche à droite, 180deg de haut en bas, et tout angle intermédiaire donne une diagonale ; les positions des arrêts en pourcentage déterminent où chaque bande de couleur commence à se fondre dans la suivante.
Quand l'aperçu vous convient, copiez la ligne d'arrière-plan dans votre feuille de style. Si vous préférez un point de départ plutôt qu'une page vierge, les pages préréglées coucher de soleil, océan et pastel ouvrent ce même outil avec des paires de couleurs éprouvées déjà chargées.