CSS Gradient Builder
Understand CSS Gradient Builder
Construit des dégradés CSS linéaires, radiaux et coniques à partir d'arrêts de couleur, avec un aperçu en direct et une déclaration background à copier.
How it works
Un dégradé est tracé le long d'une ligne (linéaire), vers l'extérieur depuis un point central (radial) ou autour d'un point central (conique), chaque arrêt de couleur étant fixé à un pourcentage de ce parcours et les pixels intermédiaires interpolés. En CSS, les angles des dégradés linéaires se mesurent dans le sens horaire depuis « to top », si bien que 0deg va du bas vers le haut, 90deg de gauche à droite et 180deg du haut vers le bas — la convention inverse de celle qu'emploient la plupart des logiciels de dessin. L'interpolation se fait par défaut en sRGB, canal par canal, et c'est pourquoi le point médian entre le bleu et le jaune ressort gris plutôt que vert.
When to use it
- Produire un fond d'accroche ou de section sans écrire à la main la syntaxe des arrêts
- Construire une superposition discrète à deux arrêts pour poser du texte sur une image sans risque
- Créer un dégradé conique pour un anneau de progression, une part de camembert ou une roue chromatique
- Obtenir le CSS exact d'un dégradé qu'un designer a spécifié par un angle et deux valeurs hexadécimales
Watch out for
- Un dégradé est une image, pas une couleur. Il définit background-image, si bien que `background-color` transparaît toujours sous les zones transparentes et reste le repli si le dégradé ne s'applique pas — définissez les deux.
- Deux teintes complémentaires s'interpolent en passant par le gris. Ajoutez un arrêt intermédiaire dans une teinte située entre elles, ou spécifiez un espace d'interpolation tel que `in oklch`, pour garder la transition saturée.
- Les grands dégradés à faible contraste font apparaître des bandes visibles. Huit bits par canal ne peuvent pas exprimer une rampe régulière sur 1000 pixels de couleur presque identique ; ajoutez une légère superposition de bruit ou augmentez l'écart de couleur.
- Les arrêts en pourcentage se rapportent à la ligne du dégradé, pas à l'élément, et la ligne d'un dégradé linéaire incliné est plus longue que la boîte. Un arrêt à 50 % n'est pas le centre géométrique de l'élément, sauf si l'angle vaut 0 ou 90 degrés.
Frequently Asked Questions
Comment faire un fond en dégradé en CSS ?
Utilisez la propriété background avec une fonction de dégradé : background: linear-gradient(135deg, #5C5BFE, #F2A03D). Le premier argument est l'angle (0deg = du bas vers le haut, 90deg = de gauche à droite). Utilisez radial-gradient() pour des dégradés circulaires ou conic-gradient() pour des dégradés angulaires.
Comment ajouter un dégradé linéaire en CSS ?
Ajoutez background: linear-gradient(direction, arrêt1, arrêt2, ...) à n'importe quel élément. La direction peut être un angle (45deg) ou un mot-clé (to right, to bottom right). Exemple : background: linear-gradient(to right, #667eea, #764ba2). Cela fonctionne sur tout élément de type bloc.
Comment utiliser linear-gradient en CSS ?
linear-gradient() crée une transition douce entre des arrêts de couleur le long d'une ligne. Servez-vous-en pour les fonds de boutons, les sections d'accroche, les superpositions de cartes et les séparateurs en diagonale. Empilez plusieurs dégradés séparés par des virgules pour des effets en couches. Ce constructeur produit la propriété CSS prête à coller.
How to Use CSS Gradient Builder
- Paste or type your input in the input area above.
- The tool processes your input automatically or click Run.
- Copy or download the result using the action buttons.
- Use Ctrl+Enter to run quickly from the keyboard.