Générateur de dégradés

Générez du code linear-gradient ou radial-gradient avec un aperçu en direct.

Générateur de dégradés

Un résultat côté navigateur pour la planification et la référence.

Couleur ACouleur B AngleMode

CSS / HEX

GUIDE

Ce qu'il faut vérifier avant de l'utiliser

Quand cet outil est utile

Utilisez ceci pour créer un arrière-plan web bicolore ou un accent de carte. Choisissez les couleurs de départ et d’arrivée, un type linéaire ou radial et un angle pour obtenir à la fois un aperçu et le CSS.

Comment le résultat est produit

Le mode linéaire crée un linear-gradient avec l’angle saisi ; le mode radial crée un radial-gradient circulaire. Le navigateur rend les couleurs intermédiaires entre les deux arrêts.

Exemple concret et interprétation

Définissez un dégradé de gauche à droite de #3366FF à #FF6655 avec 90 degrés. Copiez-le dans le composant réel et revérifiez le contraste de tout texte placé au-dessus.

Portée et limites

Le générateur utilise deux stops de couleur et ne peut pas éliminer les différences d’interpolation de couleur entre navigateurs. Ajoutez des stops complexes, des transitions alpha ou des couleurs à large gamut dans un éditeur complet.

Questions fréquentes

Comment déplacer une couleur depuis le générateur de dégradé vers une autre application ?

Utilisez le bouton Copier sous le résultat pour copier le texte CSS, HEX ou HSL. Vérifiez que l’application de destination interprète le même format de couleur.

La couleur d’écran du générateur de dégradé correspond-elle à l’impression ?

Pas automatiquement. Les écrans RGB émissifs et le papier et l’encre réfléchissants utilisent des gamuts et des modèles de mélange différents, donc les profils d’impression et les épreuves restent nécessaires.

Puis-je approuver un design token uniquement avec le générateur de dégradé ?

Utilisez-le comme candidat, puis testez le vrai arrière-plan, le mode sombre, les états d’interaction et le contraste du texte avant de nommer et d’approuver un token.