Générateur de dégradés CSS
Créez des dégradés CSS linéaires, radiaux et coniques avec autant d'arrêts de couleur que vous voulez. Aperçu en direct, préréglages et idées aléatoires, export CSS, SCSS, SVG ou PNG.
Chargement de Générateur de dégradés CSS…
Vos fichiers ne quittent jamais votre appareil
Comment utiliser Générateur de dégradés CSS
- 1
Ouvrez Générateur de dégradés CSS sur cette page. Il se charge directement dans votre navigateur.
- 2
Ajoutez votre fichier, texte ou valeurs et ajustez les réglages.
- 3
Copiez ou téléchargez le résultat. Rien n'est envoyé ni stocké.
À propos de cet outil
Ce générateur de dégradés CSS vous permet de concevoir des arrière-plans en dégradé visuellement et de copier le code. Choisissez le type de dégradé, ajoutez des couleurs, placez les arrêts en les faisant glisser et réglez l'angle : l'aperçu en direct et le CSS se mettent à jour au fur et à mesure. Quand le rendu vous plaît, copiez le CSS ou exportez-le en SCSS, en SVG ou en image PNG.
Comment créer un dégradé
- Choisissez linéaire, radial ou conique.
- Définissez les couleurs et ajoutez autant d'arrêts de couleur que nécessaire.
- Faites glisser les arrêts ou saisissez leur position exacte en pourcentage.
- Pour les dégradés linéaires et coniques, réglez l'angle (90° va de gauche à droite, 180° de haut en bas).
- Copiez le code généré ou exportez-le.
À court d'idées ? Partez d'un préréglage ou cliquez sur Random pour une nouvelle combinaison instantanée, et enregistrez les dégradés qui vous plaisent pour plus tard.
Les types de dégradés
- Linéaire : les couleurs se mélangent le long d'une ligne droite selon un angle.
linear-gradient(90deg, #6366f1, #ec4899) - Radial : les couleurs se diffusent depuis un point central, en cercle ou en ellipse.
radial-gradient(circle, #fde68a, #f97316) - Conique : les couleurs tournent autour d'un centre, comme un cercle chromatique ou un camembert.
conic-gradient(from 0deg, red, yellow, lime, aqua, blue, magenta, red)
Formats d'export
- CSS : une propriété background prête à coller.
- SCSS : le dégradé sous forme de variable pour votre feuille de style.
- SVG : un fichier vectoriel pour les outils de design et les illustrations.
- Image PNG : pour les endroits qui n'acceptent pas le CSS, comme les diapositives et les publications sur les réseaux.
Conseils pour de beaux dégradés
- Utilisez des couleurs voisines pour des transitions douces. Des couleurs opposées comme le rouge et le vert peuvent donner un gris terne au milieu ; ajoutez un arrêt intermédiaire pour l'éviter.
- Gardez le texte lisible : vérifiez le contraste à l'endroit le plus clair et le plus sombre derrière le texte.
- Arrêts nets : placez deux arrêts à la même position pour obtenir un bord franc, utile pour des rayures.
- La sobriété fait pro : deux nuances proches d'une même teinte paraissent plus calmes qu'un arc-en-ciel.
Tous les navigateurs modernes prennent en charge les dégradés linéaires, radiaux et coniques sans préfixe. Vous créez toute une palette ? Utilisez le générateur de palette de couleurs, et ajoutez de la profondeur avec le générateur d'ombres CSS.
Questions fréquentes
Comment créer un dégradé CSS ?
Choisissez un type, au moins deux couleurs, ajustez les arrêts et l'angle, puis copiez le CSS généré dans votre feuille de style comme arrière-plan.
Quelle différence entre dégradés linéaire, radial et conique ?
Le linéaire mélange les couleurs le long d'une ligne droite, le radial les diffuse depuis un point central, et le conique les fait tourner autour d'un centre comme un cercle chromatique.
Comment faire un dégradé avec un bord net ?
Placez deux arrêts de couleur à la même position. Les couleurs changent alors instantanément à cet endroit au lieu de se mélanger.
Puis-je télécharger un dégradé en image ?
Oui. Exportez-le en image PNG, ou en SVG si vous avez besoin d'un fichier vectoriel.
Les dégradés CSS fonctionnent-ils dans tous les navigateurs ?
Oui. Les dégradés linéaires, radiaux et coniques sont pris en charge par toutes les versions actuelles de Chrome, Edge, Firefox et Safari, sans préfixe.
Puis-je enregistrer mes dégradés ?
Oui. Enregistrez vos dégradés favoris et rouvrez-les plus tard dans le même navigateur.