▤

Générateur de dégradé CSS

Créez un dégradé linéaire ou radial avec aperçu en direct et copiez le CSS.

Vos fichiers restent sur cet appareil

Les fichiers sont traités dans votre navigateur, jamais envoyés. Le site télécharge le code et les ressources nécessaires aux outils. Sans compte ni traceurs.

Utilisez Télécharger pour enregistrer cet outil dans un fichier HTML utilisable hors ligne.

Confidentialité →

Type

Angle (90°)

Couleur 1 Position 1 (0%)

Couleur 2 Position 2 (100%)

sortie

Essayez un exemple détaillé

Exemple

Choisissez le type linéaire, réglez l’angle sur 135 et les couleurs sur #ff7e5f et #feb47b. Le CSS est background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%);. Placer le premier arrêt à 20 garde la première couleur unie sur les 20 premiers % de la boîte.

À retenir

0deg pointe vers le haut et 90deg vers la droite : 135deg va donc du coin supérieur gauche au coin inférieur droit. Si du texte repose sur un dégradé, vérifiez son contraste avec les deux couleurs extrêmes.

À propos de cet outil

Créez un dégradé linéaire ou radial à deux couleurs en choisissant les couleurs, les positions et un angle, puis copiez la règle de background. L'aperçu en direct fonctionne entièrement dans votre navigateur.

Foire aux questions

Qu'est-ce que l'angle dans un dégradé linéaire ?

L'angle définit la direction de la transition de couleur : 0° pointe vers le haut, 90° vers la droite, 180° vers le bas, et ainsi de suite.

Quand utiliser radial plutôt que linéaire ?

Utilisez radial pour faire rayonner les couleurs vers l'extérieur depuis un point central (comme un projecteur) ; linéaire les fond le long d'une ligne droite.