Comment créer des dégradés CSS

linear-gradient. Le plus courant. Une transition de couleur suivant une ligne droite. Vous pouvez contrôler la direction (haut vers bas, gauche vers droite, angle personnalisé) et ajouter autant de couleurs (« stops ») que souhaité.

radial-gradient. Les couleurs irradient depuis un point central vers l'extérieur, en cercle ou en ellipse. Parfait pour créer des effets de lumière, des boutons lumineux ou des arrière-plans subtils.

conic-gradient. Les couleurs tournent autour d'un point central, comme les secteurs d'une roue chromatique. Idéal pour créer des graphiques circulaires, des jauges ou des effets arc-en-ciel.

repeating-linear-gradient / repeating-radial-gradient. Des versions qui se répètent, parfaites pour créer des motifs rayés ou des textures.

Couleurs analogues. Choisissez des couleurs adjacentes sur la roue chromatique (bleu → violet, orange → rouge). Les transitions sont naturellement harmonieuses et douces.

Couleurs complémentaires. Des couleurs opposées sur la roue (bleu → orange). Attention : la transition directe peut créer une zone grisâtre au milieu. Ajoutez une couleur intermédiaire pour éviter cela.

Monochrome. Variations d'une même teinte (bleu clair → bleu foncé). Toujours élégant et professionnel. Parfait pour les arrière-plans subtils.

Évitez les transitions brutales. Plus les couleurs sont éloignées sur la roue chromatique, plus vous avez besoin de stops intermédiaires pour adoucir la transition.

Astuce pro : utilisez l'espace colorimétrique oklch() pour des transitions perceptuellement uniformes. Les dégradés en oklch sont plus naturels que ceux en RGB.

Étape 1 : Choisissez le type. Linéaire, radial ou conique. Chaque type a ses propres options de personnalisation.

Étape 2 : Sélectionnez vos couleurs. Utilisez le sélecteur de couleurs pour choisir vos stops. Ajoutez, supprimez ou réorganisez les stops en un clic.

Étape 3 : Ajustez la direction et les positions. Changez l'angle, le point de départ, et la position exacte de chaque stop pour un contrôle total.

Étape 4 : Copiez le code CSS. Le code CSS est généré en temps réel. Copiez-le et collez-le directement dans votre feuille de style.

Prévisualisation en direct, historique des dégradés, et suggestions de palettes populaires incluses.

Arrière-plans de sections. Un dégradé subtil entre deux tons proches donne de la profondeur sans distraire du contenu. C'est l'utilisation la plus courante en web design moderne.

Boutons et CTA. Un dégradé rend les boutons plus dynamiques et attrayants qu'une couleur plate. Ajoutez un léger changement de dégradé au hover pour un effet satisfaisant.

Texte en dégradé. Avec background-clip: text, vous pouvez appliquer un dégradé directement sur du texte. Très tendance pour les titres et les logos.

Overlays sur images. Un dégradé semi-transparent par-dessus une image améliore la lisibilité du texte superposé.

Bordures. Les border-image avec dégradé créent des bordures colorées impossibles avec border-color classique.

Les dégradés CSS sont performants. Contrairement aux images, ils sont vectoriels (pas de pixellisation), légers (quelques octets de code vs des Ko d'image), et rendus par le GPU.

Préférez CSS aux images. Un dégradé en CSS est toujours plus rapide à charger et plus net qu'une image de dégradé. Il s'adapte aussi naturellement à toutes les tailles d'écran.

Limitez le nombre de stops. Plus de 4-5 stops rend le code complexe et la prévisualisation difficile. Si vous avez besoin de dégradés très complexes, envisagez SVG.

Testez sur mobile. Les dégradés peuvent paraître différents sur les écrans OLED vs LCD. Testez toujours sur plusieurs types d'écrans.

Accessibilité. Assurez-vous que le texte sur un fond en dégradé reste lisible à tous les points du dégradé. Vérifiez le contraste WCAG à chaque extrémité.