CSS Gradient Generator

Concevez visuellement des dégradés CSS linéaires et radiaux, ajustez les couleurs et l'angle, et copiez le CSS.

Comment utiliser

Choisissez le type de dégradé — linéaire ou radial — et sélectionnez vos couleurs.
Ajustez l'angle avec le curseur (linéaire seulement) et voyez l'aperçu se mettre à jour en temps réel.
Copiez le CSS en un clic et collez-le dans votre feuille de style.

À propos de cet outil

Les dégradés CSS sont les motifs de fond du web moderne. Un dégradé linéaire mélange les couleurs le long d'une ligne selon un angle choisi ; un dégradé radial les mélange depuis un point central vers l'extérieur. Les deux sont déclarés dans une seule propriété CSS, s'affichent à n'importe quelle résolution sans fichier image et ne coûtent rien en poids réseau. Ce générateur construit la déclaration visuellement.

Choisissez deux ou trois couleurs, définissez l'angle pour le linéaire ou laissez-le pour le radial, et l'aperçu affiche le résultat. La ligne CSS en dessous est prête à copier — collez-la comme propriété background et elle fonctionne dans tous les navigateurs sortis dans la dernière décennie. Trois couleurs produisent des dégradés plus riches que deux, et la couleur du milieu est celle qui fait ou défait le design.

L'outil s'exécute dans votre navigateur. Il n'y a aucun appel serveur, aucune image générée, aucun fichier à télécharger. Ce que vous voyez dans l'aperçu est ce que le navigateur rend à partir du CSS, ce qui signifie que le résultat en production sera identique.

Questions fréquentes

Does it work in all browsers?

Oui. Les dégradés CSS sont pris en charge par tous les navigateurs modernes. Le code généré utilise la syntaxe standard sans préfixes vendeurs.

Puis-je ajouter plus de trois couleurs ?

L'outil propose trois points de couleur. Pour des dégradés plus complexes, commencez avec le code à trois points et ajoutez-en manuellement dans votre CSS.

What is the angle?

La direction du dégradé en degrés. 0 va vers le haut, 90 vers la droite, 180 vers le bas. Le curseur couvre de 0 à 360.

Puis-je l'utiliser pour des dégradés de texte ?

Oui. Appliquez le dégradé comme background-image, définissez background-clip: text et color: transparent. Le CSS généré par cet outil est la partie background-image.

Is the gradient an image?

Non. C'est une déclaration CSS. Le navigateur le rend mathématiquement, il est donc net à toute taille et n'ajoute aucun poids à la page.

css gradiente linear radial cores gerador background design web frontend visual copiar

Outils associés

CSS Box Shadow Generator Concevez visuellement des ombres portées — ajustez le décalage, le flou, l'étendue, la couleur et l'opacité, et copiez le CSS. Convertisseur de couleurs Convertissez une couleur entre HEX, RGB, HSL, HSV et CMYK avec une synchronisation bidirectionnelle en direct, dans votre navigateur. Générateur de palette de couleurs Choisissez une couleur de base et générez des palettes harmonieuses — complémentaire, triadique, analogue, complémentaire divisée et monochromatique. Vérificateur de contraste WCAG Vérifiez le rapport de contraste entre deux couleurs et voyez s'il respecte les niveaux WCAG AA et AAA, en direct dans votre navigateur. Mélangeur de couleurs Mélangez deux couleurs avec un curseur de proportion et lisez toute l'échelle de 11 paliers qui les sépare, dans votre navigateur. Générateur d'UUID v4 Générez un ou plusieurs identifiants UUID v4 aléatoires avec un aléa cryptographique.

Des liens trop longs ? Raccourcissez-les gratuitement

Vai.la transforme n'importe quelle URL en lien court avec statistiques de clics, QR Code et votre propre biolink.

Raccourcir un lien Créer un compte gratuit

Vai.la n'est pas responsable de l'utilisation des outils ni des décisions prises sur la base de leurs résultats.