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 %.
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.
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.
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.