CSS Gradients Sans Stack Overflow — Générez-les Visuellement et Déployez-les

Vous avez ouvert un nouveau fichier CSS, saisi background:, puis vous êtes resté à regarder l'écran. Vous savez que vous voulez un gradient. Vous savez que la propriété est linear-gradient. Vous ne vous souvenez pas si l'angle vient en premier ou en dernier, si les degrés sont horaires ou antihoraire, ou pourquoi les couleurs que vous avez saisies ne ressemblent pas à ce que vous avez imaginé.

Cet article résout ce problème. Nous allons expliquer exactement comment fonctionnent les gradients CSS — la syntaxe, la logique de l'angle et les modèles que vous utiliserez réellement — et vous fournirons un générateur visuel afin que vous cessiez de deviner et commenciez à livrer.

Comment fonctionne réellement linear-gradient

La syntaxe de base est :

background: linear-gradient(direction, color-stop1, color-stop2, ...);

Cela direction est ce qui embrouille les gens. Vous avez deux options : un mot-clé ou un angle en degrés.

Mots-clés : to top, to bottom (par défaut), to left, to right, et les diagonales : to top right, to bottom left, etc.

Degrés : 0deg pointe vers le haut (comme to top). L'angle augmente horairement, donc 90deg pointe vers la droite, 180deg pointe vers le bas, 270deg pointe vers la gauche.

Voici l'élément à retenir : 0deg = vers le haut, horaire à partir de là. Tout le reste en découle.

Six modèles que vous utiliserez cette semaine

1. De haut en bas (par défaut)

background: linear-gradient(to bottom, #667eea, #764ba2);

2. Désactivation vers transparent

Vous souhaitez superposer du texte sur une image ? Vous devez avoir le bas sombre et le haut clair. Utilisez transparent:

background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);

Une remarque : évitez transparent dans Safari lorsqu'on passe d'une valeur colorée à une autre — il passe par le noir. Utilisez rgba(r, g, b, 0) avec les mêmes valeurs RGB au lieu.

3. Arrière-plan en angle hero

background: linear-gradient(135deg, #f093fb 0%, #f5576c 50%, #fda085 100%);

135deg est approximativement de bas-gauche vers haut-droite — un angle typique d'une couverture de magazine. Les gradients à plusieurs étapes comme celui-ci sont définis par des pourcentages de position après chaque couleur. Sans pourcentage, CSS les répartit uniformément.

4. Sombre subtil de carte

background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);

Les cartes utilisant une couleur blanche pure semblent plates contre une page blanche. Un gradient très léger allant du blanc pur à un gris très clair leur donne de la profondeur sans qu'ils semblent conçus. C'est le gradient que personne ne remarque, et c'est le point.

5. Superposition de bouton

background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);

Les gradients de gauche à droite (90deg) ont un effet dynamique. Associez-le à un état de survol qui déplace la position de fond (en utilisant background-size: 200% et en transitionnant background-position) pour un effet de glissement fluide sur les boutons.

6. Arrêt de couleur (sans mélange)

background: linear-gradient(90deg, #e74c3c 50%, #3498db 50%);

Deux points de couleur à la même position créent une ligne nette sans mélange. Utile pour des affichages en deux colonnes, des indicateurs de progression ou des motifs en bandes — tout cela sans élément ou image supplémentaire.

Gradients radiaux : l'autre option

radial-gradient s'étend à partir d'un point central plutôt que de se déplacer dans une direction :

background: radial-gradient(circle at center, #a18cd1 0%, #fbc2eb 100%);

Le premier argument est la forme (circle ou ellipse) suivie de la position. at center est par défaut. Déplacez le point focal avec at top left, at 30% 60%, etc. Les gradients radiaux sont excellents pour les effets de spotlights, les boutons lumineux et les fonds de page radiaux.

La syntaxe que personne ne se souvient (et comment l'éviter)

Les trois points qui embrouillent les développeurs, dans l'ordre de fréquence :

• L'angle avant les couleurs — la direction vient toujours en premier, avant tout point de couleur.
• Les degrés horaires — 90deg est à droite, pas vers le haut. 0deg est vers le haut.
• Le passage transparent à couleur — les navigateurs mélange par le noir sauf si vous utilisez les mêmes valeurs RGBA aux deux extrémités.

Si vous voulez éviter entièrement les essais et erreurs, le Générateur de dégradé CSS sur iotools.cloud vous permet de choisir les couleurs visuellement, de déplacer les points, d'inverser l'angle et de copier le CSS final en un clic. Aucun besoin de deviner ce que 143deg ressemble.

Prise en charge du navigateur

linear-gradient et radial-gradient sont basés sur tous les navigateurs modernes — Chrome, Firefox, Safari et Edge les prennent tous sans préfixe. Vous n'avez pas besoin de -webkit- préfixes pour la syntaxe standard des gradients en 2026.

L'exception est la syntaxe plus ancienne -webkit-linear-gradient utilisée par Safari 5.1 et Chrome 10–25. Sauf si vous supportez des navigateurs de 2012, vous pouvez l'ignorer.

conic-gradient a un excellent support dans les navigateurs modernes mais pas de fallback pour IE/anciens navigateurs — utilisez-le lorsque le niveau minimal de compatibilité est éternel.

Omettez la syntaxe — générez-la visuellement

La syntaxe des gradients CSS n'est pas complexe, mais elle est fastidieuse à ajuster manuellement. Le Générateur de dégradé CSS sur iotools.cloud vous donne une prévisualisation en temps réel, des points de couleur déplacables, des contrôles de saisie pour les gradients linéaires ou radiaux, et une copie en un clic. Construisez votre gradient visuellement, collez le résultat et livrez-le.

Vous aimerez peut-être aussi