Générateur de dégradé CSS
Concevez des dégradés d'arrière-plan CSS sans mémoriser la syntaxe. Basculez entre les types linéaires et radiaux, définissez un angle pour les dégradés linéaires (degrés) et choisissez deux arrêts de couleur à 0 % et 100 %. L'aperçu est mis à jour instantanément ; copiez la déclaration complète d'arrière-plan ou d'image d'arrière-plan dans votre feuille de style. Prend en charge la saisie de couleurs HEX avec validation.
Angle (°)
Couleur 1
Couleur 2
CSS
background: linear-gradient(135deg, #6f9b96 0%, #e8c4b8 100%);
Comment créer un dégradé
1. Choisissez un dégradé linéaire ou radial.
2. Pour linéaire, définissez l'angle en degrés (0 = de bas en haut, 90 = de gauche à droite).
3. Entrez les couleurs de début et de fin (HEX).
4. Copiez le CSS de la carte de résultat dans votre projet.
Exemples de dégradés
Bannière de héros linéaire (135°)
Sarcelle # 6F9B96 à pêche # E8C4B8 à 135 ° — une diagonale courante dans les en-têtes des pages de destination. Utiliser comme arrière-plan sur une section pleine largeur.
Projecteur radial
Type radial avec centre clair et bord sombre — simule une vignette : radial-gradient (circle, #fff 0%, #333 100%).
Fondu vertical (180 degrés)
Angle 180 pour un fondu de haut en bas de la couleur de la marque au blanc — utile derrière les barres de navigation.
Quand utiliser cet outil
• Lorsque vous prototypez des arrière-plans d’interface utilisateur et souhaitez un retour visuel instantané.
• Quand vous oubliez si l'angle 90 degrés va de gauche à droite ou de haut en bas.
• Lorsque vous avez besoin de copier-coller CSS pour CodePen, les valeurs arbitraires de Tailwind ou le transfert de conception.
Quand choisir autre chose
• Lorsque vous avez besoin de plus de deux arrêts de couleur, étendez manuellement le CSS copié ou utilisez une application de conception.
• Lorsque vous souhaitez des dégradés coniques (balayage), non pris en charge ici.
• Lorsque vous avez besoin de variantes automatiques du mode sombre, dupliquez et ajustez les couleurs séparément.
La couleur s'arrête en détail
Un stop est une couleur plus une position facultative : #ff0000 0%, #0000ff 50%, #00ff00 100%. Le navigateur interpole RVB entre les arrêts. Les arrêts médians créent des couchers de soleil en bandes ou des rayures multimarques. Commencez par deux arrêts ici, puis collez et ajoutez un troisième arrêt dans devtools jusqu'à ce que cela semble correct.
Angles de dégradé linéaires
CSS mesure les angles dans le sens des aiguilles d'une montre à partir de « vers le haut » (0deg). Cela diffère du cours de mathématiques où les angles partent souvent de la droite. Si un dégradé semble mal pivoté, ajoutez ou soustrayez 90 degrés. Utilisez l'édition en direct de devtools avec ce générateur pour un réglage précis.
Performances et solutions de repli
Les dégradés sont compatibles GPU sur les navigateurs modernes. Pour les clients très anciens, définissez une couleur d'arrière-plan unie de remplacement sur la couleur d'arrêt la plus claire avant la ligne de dégradé.
Questions fréquentes
Quelle est la syntaxe CSS pour un dégradé linéaire ?
arrière-plan : dégradé linéaire (angle, couleur 1 0 %, couleur 2 100 %) ; L'angle est en degrés ; les couleurs sont des arrêts le long de la ligne.
Comment fonctionnent les arrêts de couleur ?
Des arrêts marquent l'endroit où chaque couleur se trouve sur la ligne de dégradé. 0% c'est le début, 100% la fin. Cet outil corrige deux arrêts ; ajoutez-en plus dans votre éditeur si nécessaire.
Linéaire ou radial ?
Mélanges linéaires le long d’une ligne droite. Les mélanges radiaux vers l'extérieur à partir d'un point central sont parfaits pour les cercles et les points faibles.
Quelles valeurs d'angle sont courantes ?
0° vers le haut, 90° vers la droite, 180° vers le bas, 135° en diagonale — courant pour les cartes et les héros.
Est-ce qu'il définit l'arrière-plan ou l'image d'arrière-plan ?
La sortie utilise le raccourci d’arrière-plan adapté à la plupart des div ; vous pouvez diviser en image d'arrière-plan si vous remplacez d'autres calques.
Les couleurs sont-elles envoyées à un serveur ?
Non. Aperçu du rendu localement.
Est-ce gratuit ?
Oui, aucun nombre n'est nécessaire.