Mode d’emploi

Choisissez un dégradé linéaire, radial ou conique, puis définissez l’angle ou la position du centre.
Définissez la couleur, l’opacité et la position de chaque point. Ajoutez jusqu’à six points ou supprimez ceux dont vous n’avez pas besoin.
Vérifiez l’aperçu, puis copiez la ligne CSS dans votre feuille de style.

Fonctionnement

Le résultat est une déclaration CSS background standard. Les dégradés linéaires suivent un angle : 0deg va du bas vers le haut, 90deg de gauche à droite et 180deg du haut vers le bas. Les dégradés radiaux partent d’un point central sous forme de cercle ou d’ellipse adaptée au bloc. Les dégradés coniques tournent autour d’un point central à partir de l’angle choisi, ce qui est utile pour créer des effets en secteurs ou des roues chromatiques.

Les points de couleur sont écrits dans l’ordre de leur position ; vous pouvez donc les déplacer librement. Un point dont l’opacité est réduite est écrit sous la forme rgba(), ce qui laisse transparaître l’arrière-plan. Deux points à la même position créent une transition nette plutôt qu’un fondu : c’est ainsi que l’on crée des rayures.

Les trois fonctions de dégradé sont prises en charge par tous les navigateurs actuels. Par défaut, les dégradés sont interpolés dans l’espace colorimétrique sRGB, ce qui peut donner un aspect légèrement gris entre des couleurs complémentaires (par exemple, le bleu et le jaune). Ajouter un point intermédiaire d’une couleur plus vive permet d’éviter cela.

Exemples

Arrière-plan discret pour un en-tête

linear-gradient(180deg, #f5f7fa 0%, #c3cfe2 100%) crée un fondu subtil de haut en bas qui permet de conserver la lisibilité du texte foncé.

Rayures à bords nets

Utilisez quatre points : #0b5d1e 0%, #0b5d1e 50%, #f2c14e 50%, #f2c14e 100%. Les deux points à 50% se rejoignent sans fondu, créant deux moitiés unies.

Effet de projecteur

Un dégradé radial (circle at top left) allant de rgba(255, 255, 255, 0.6) à rgba(255, 255, 255, 0), superposé à une couleur, crée un halo lumineux doux dans le coin.

Foire aux questions

Dans quelle direction va 0deg ?

En CSS, 0deg pointe vers le haut : le dégradé commence donc en bas et se termine en haut. 90deg va de gauche à droite. Cela diffère de certaines applications de design, où 0° correspond souvent à une direction de gauche à droite.

Puis-je appliquer le dégradé au texte ?

Oui : appliquez le dégradé à l’arrière-plan, puis ajoutez background-clip: text et color: transparent. Vérifiez que le texte reste lisible sur la page, quelle que soit la partie du dégradé derrière lui.

Ai-je besoin de préfixes spécifiques aux navigateurs, comme -webkit-linear-gradient ?

Non. Les navigateurs actuels prennent en charge la syntaxe sans préfixe. Les préfixes ne sont nécessaires que pour les navigateurs qui datent de plusieurs années.

Confidentialité

Tout est généré dans votre navigateur. Vos couleurs et vos réglages ne sont ni envoyés ni stockés.