Générateur de dégradé CSS
Créez des dégradés CSS linéaires, radiaux et coniques avec aperçu en direct, arrêts de couleur et angle. Générateur de dégradé CSS gratuit en ligne.
What next?
Utile ? Partagez Générateur de dégradé CSS
Gratuit, sans inscription, fonctionne dans le navigateur — envoyez-le à un ami ou ajoutez-le à votre site.
Outils associés
- Sélecteur de couleurChoisissez une couleur et convertissez HEX en RGB, HSL, HSV et CMJN en ligne gratuitement. Sélecteur de couleurs gratuit avec pipette d'image et nuances.
- Simulateur de daltonismeVoyez les images comme les daltoniens : simulez la deutéranopie, la protanopie, la tritanopie et l'achromatopsie en ligne gratuitement.
- Générateur de couleurs aléatoiresGénérez des couleurs aléatoires avec ce générateur gratuit en ligne — pastel, vives, sombres, chaudes ou froides, avec codes HEX.
- Traducteur binaireTraduisez du texte en binaire et du binaire en texte avec ce traducteur binaire gratuit en ligne. Convertissez aussi des nombres entre binaire et décimal.
- Comparateur de texteComparez deux textes en ligne gratuitement et surlignez chaque différence par ligne, mot ou caractère. Comparateur de texte qui peut ignorer casse et espaces.
- Générateur de QR codeCréez des codes QR en ligne gratuitement pour URL, texte, WiFi, e-mail, téléphone et SMS. Générateur de code QR gratuit — sans inscription, n'expire jamais.
Fait partie de ces kits
Comment utiliser Générateur de dégradé CSS
- 1Choisissez Linéaire, Radial ou Conique et réglez l'angle ou la forme
- 2Choisissez les couleurs avec le sélecteur ou saisissez des codes hex, faites glisser la position de chaque arrêt, ajoutez jusqu'à 8 couleurs, ou partez d'un préréglage ou d'Aléatoire
- 3Appuyez sur Copier le CSS pour coller la règle d'arrière-plan (avec une couleur de secours unie) dans votre feuille de style
Questions fréquentes
Comment faire un fond dégradé en CSS ?▾
Utilisez la propriété background avec une fonction de dégradé, p. ex. background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%); L'angle définit la direction et chaque couleur peut avoir une position d'arrêt.
Quelle est la différence entre les dégradés linéaires, radiaux et coniques ?▾
Les dégradés linéaires se fondent le long d'une ligne droite à un angle, les dégradés radiaux s'étendent vers l'extérieur depuis un point central, et les dégradés coniques balaient les couleurs autour du centre comme une roue chromatique ou un camembert.
Que signifie l'angle dans linear-gradient ?▾
0deg pointe vers le haut (de bas en haut), 90deg va de gauche à droite, 180deg de haut en bas et 135deg va en diagonale du haut à gauche vers le bas à droite.
Les dégradés CSS fonctionnent-ils dans tous les navigateurs ?▾
Les dégradés linéaires et radiaux fonctionnent dans tous les navigateurs modernes sans préfixes. Les dégradés coniques sont pris en charge par tous les navigateurs actuels depuis 2020. Le code généré ajoute d'abord une couleur unie comme solution de repli.
Puis-je utiliser un dégradé sur du texte ?▾
Oui : définissez le dégradé comme background, puis ajoutez background-clip: text; -webkit-background-clip: text; et color: transparent; à l'élément de texte.
Embed Générateur de dégradé CSS on your website▾
Paste this snippet into your page. The embedded tool runs in your visitor's browser and shows a small “Powered by clkr.work” link.