Générateur de dégradé CSS
Créez rapidement un fond en dégradé (linear-gradient) pour une page web, avec aperçu en temps réel et code CSS prêt à copier — sans ouvrir Figma ni Photoshop.
Comment ça marche
Un dégradé linéaire CSS (linear-gradient) permet de créer un fond visuellement riche — bannière, bouton, arrière-plan de section — sans image ni outil de design externe. Choisissez deux couleurs et un angle, observez l'aperçu en direct, puis copiez directement la propriété background générée dans votre feuille de style. C'est l'approche la plus rapide pour prototyper un fond dégradé avant de l'affiner dans votre charte graphique.
Puis-je utiliser plus de deux couleurs dans un dégradé ?
Le CSS le permet nativement (linear-gradient(90deg, #fff, #f00, #00f), par exemple), mais cet outil se concentre volontairement sur un dégradé à deux couleurs, le cas d'usage le plus courant pour un fond de section ou de bouton. Pour un dégradé plus complexe, vous pouvez copier le résultat généré ici puis ajouter des arrêts de couleur supplémentaires directement dans votre CSS.
Que représente l'angle du dégradé ?
L'angle détermine la direction dans laquelle le dégradé progresse : 0° va de bas en haut, 90° va de gauche à droite, 180° va de haut en bas, etc. C'est la même convention que celle utilisée nativement par la fonction CSS linear-gradient(), donc le code copié ici produit exactement le rendu que vous voyez dans l'aperçu.
Traitement 100% local : la génération du code CSS s'effectue directement dans votre navigateur via WebAssembly, sans aucun appel à un serveur externe.