Générateur de dégradé CSS
Créez un dégradé CSS linéaire, radial ou conique avec plusieurs couleurs, voyez-le en direct et copiez le code CSS ou Tailwind. Export en image PNG.
- Gratuit
- Sans inscription
- Aucun fichier envoyé
- Windows, Mac, Android, iPhone
Chargement de l'outil…
À propos de cet outil
Composez un dégradé CSS en direct : linéaire, radial ou conique, jusqu'à 8 couleurs avec leur position et leur opacité, angle et centre réglables. Copiez le code CSS ou la classe Tailwind, ou enregistrez le dégradé en image pour un fond d'écran ou une maquette.
Dans quels cas l'utiliser ?
Fonds de sections et de boutons
Un dégradé discret donne du relief à un bandeau d'accueil ou à un bouton principal, sans image à charger : le code tient en une ligne.
Voile sur une photo
Un dégradé du transparent vers le noir, posé sur le bas d'une image, rend un titre blanc lisible quelle que soit la photo.
Fonds d'écran et visuels
Enregistré en 1920 × 1080, le dégradé sert de fond d'écran, de fond de présentation ou de base pour un visuel de réseau social.
Mode d'emploi
- Choisissez le type de dégradé et son angle.
- Réglez chaque couleur et sa position, ajoutez-en jusqu'à 8.
- Copiez le code CSS ou Tailwind, ou enregistrez le dégradé en image.
Comment ça marche
L'outil écrit la même syntaxe que les feuilles de style : les couleurs sont triées par position, l'opacité est convertie en rgba(), et l'angle suit la convention CSS (0deg vers le haut, 90deg vers la droite).
Pour l'export en image, le dégradé est redessiné dans un canvas avec les mêmes règles que CSS : la ligne d'un dégradé linéaire est calculée pour que les coins prennent les couleurs extrêmes, et le rayon d'un dégradé radial atteint le coin le plus éloigné.
Conseils pour un bon résultat
- Deux couleurs voisines sur le cercle chromatique donnent les dégradés les plus naturels.
- Évitez de passer par le gris : entre deux couleurs complémentaires, ajoutez une couleur intermédiaire vive.
- Pour un texte posé dessus, vérifiez le contraste avec la couleur la plus claire du dégradé.
- Les dégradés coniques répétés font de beaux motifs en éventail avec deux couleurs proches.
Problèmes fréquents et solutions
Une bande grise apparaît au milieu
Le passage entre deux couleurs opposées traverse le gris. Ajoutez une couleur intermédiaire, ou rapprochez les teintes.
Le dégradé semble en escalier
Sur de grandes surfaces, des dégradés très doux peuvent montrer des bandes. Augmentez l'écart entre les couleurs ou ajoutez un léger bruit en image.
Le code Tailwind ne marche pas
La classe bg-[…] demande Tailwind 3 ou plus récent avec les valeurs arbitraires activées (c'est le cas par défaut).
Questions fréquentes
Quelle différence entre dégradé linéaire, radial et conique ?
Le linéaire passe d'une couleur à l'autre en ligne droite, le radial part d'un centre vers l'extérieur, et le conique tourne autour d'un centre comme les aiguilles d'une montre (utile pour les camemberts et les roues de couleurs).
Le code fonctionne-t-il sur tous les navigateurs ?
Oui. linear-gradient, radial-gradient et conic-gradient sont pris en charge par tous les navigateurs récents. Une couleur unie est ajoutée en première ligne pour les très anciens navigateurs.
Puis-je utiliser de la transparence ?
Oui : chaque couleur a son opacité. Un dégradé vers une couleur transparente sert souvent à assombrir le bas d'une photo pour y poser du texte.
À quoi sert l'option « Répéter » ?
Elle produit un repeating-gradient : le dégradé se répète, ce qui crée des rayures ou des cercles concentriques à partir de deux ou trois couleurs rapprochées.
Recherches associées
Toujours bloqué ?
Posez votre question sur le forum : la catégorie, l'outil, la fiche de votre appareil et le résultat du test seront déjà remplis.