Un souci avec cet outil ?
À propos de « Générateur De Dégradés CSS En Ligne »
Cet outil construit visuellement des gradients CSS linéaires, radiaux et coniques. Ajoutez des arrêts de couleur, choisissez direction ou angle, réglez la transparence, et l'outil génère le code CSS correspondant à coller dans votre feuille de style.
Les dégradés sont partout en web design moderne : fonds de hero, états de boutons, accents de cartes, texte en gradient. Écrire à la main la syntaxe est fastidieux — l'édition visuelle laisse expérimenter des transitions douces sans tâtonner.
La sortie gère les arrêts multiples, le positionnement en pourcentage, l'interpolation dans différents espaces colorimétriques, et les gradients coniques pour effets circulaires. Copie en CSS ou classe utilitaire Tailwind.
Comment utiliser cet outil
Assembler une déclaration CSS linear-gradient à deux stops
Choisir les stops
« Color 1 » et « Color 2 » acceptent n’importe quelle couleur CSS : hex (`#1e3a8a`), rgb (`rgb(30 58 138)`), rgba avec alpha, ou nom (`navy`). Premier stop à 0 %, second à 100 %.
Régler l’angle
« Angle (deg) » donne la direction en degrés. `0` du bas vers le haut, `90` de gauche à droite, `180` du haut vers le bas (défaut CSS), `45` la diagonale classique.
Exécuter
Résultat : champ unique `css` — `linear-gradient(<angle>deg, <color1>, <color2>)`. À coller directement comme valeur de `background:` ou `background-image:`.
Au-delà de deux stops
Pour radial, conic ou 3+ stops, éditez la sortie à la main — syntaxe `linear-gradient(45deg, #fff 0%, #000 50%, #f00 100%)`. Sinon passez à un éditeur de gradient plus complet ; cet outil est volontairement minimaliste, deux stops linéaires.