Créateur de dégradés CSS
Composez un dégradé linéaire, radial ou conique, copiez le code CSS et téléchargez-le en image PNG.
Couleurs du dégradé
Tout fonctionne dans votre navigateur : aucune donnée n’est envoyée.
À propos de cet outil
Ce créateur de dégradés CSS vous permet de composer visuellement un dégradé linéaire, radial ou conique et d’obtenir le code CSS prêt à coller. Choisissez de 2 à 6 couleurs, placez chacune où vous voulez et réglez l’angle : l’aperçu se met à jour en direct. Pratique pour un fond de site, un bouton, une bannière ou un visuel de réseau social.
Le code généré contient une première ligne avec une couleur unie de secours, puis le dégradé. Les boutons Inverser et Au hasard aident à explorer des idées rapidement. Vous pouvez aussi télécharger le dégradé en image PNG en 1920 × 1080, 1080 × 1080, 1080 × 1920 ou 3840 × 2160 px, et partager votre création avec un lien qui contient ses couleurs.
- Dégradés linéaire, radial ou conique
- De 2 à 6 couleurs avec position réglable
- Angle de 0 à 360°, par pas de 5°
- Code CSS avec couleur de secours
- Export PNG jusqu’en 3840 × 2160 px
Comment l’utiliser
- Choisissez le « Type de dégradé » et réglez l’« Angle ».
- Définissez les « Couleurs du dégradé » et leur position ; ajoutez-en si besoin.
- Cliquez sur « Copier » pour récupérer le code CSS.
- Ou choisissez une taille et cliquez sur « Télécharger en PNG ».
Questions fréquentes
Mes couleurs sont-elles envoyées quelque part ?
Non. Le dégradé est calculé et dessiné dans votre navigateur ; aucune donnée n’est envoyée. Les couleurs figurent seulement dans l’adresse de la page pour le lien de partage.
Le créateur de dégradés est-il gratuit ?
Oui, il est gratuit et s’utilise sans compte ni inscription.
Comment utiliser le code CSS du dégradé ?
Copiez les deux lignes background et collez-les dans la règle CSS de votre élément. La première ligne applique une couleur unie si le navigateur ne gère pas le dégradé, la seconde applique le dégradé.
L’image PNG comporte-t-elle une marque ?
Oui, le PNG téléchargé porte une petite mention discrète « kspnai.com/tools/gradient-maker » avec le logo KSPNAI en bas à droite. Le code CSS copié n’en contient aucune.