Générateur de Dégradés CSS en Ligne — Dégradés Linéaires, Radiaux, Coniques

Un dégradé linéaire crée une transition de couleur fluide le long d'une ligne droite. Réglez l'angle de 0° à 360° et ajoutez jusqu'à 10 couleurs.

Syntax:

background: linear-gradient(angle, color1 position%, color2 position%);

Examples:

• linear-gradient(90deg, #667eea 0%, #764ba2 100%)
• linear-gradient(135deg, #f857a6 0%, #ff5858 100%)
• linear-gradient(to right, #ee0979 0%, #ff6a00 100%)

Un dégradé radial crée une transition du centre vers l'extérieur en forme de cercle ou d'ellipse.

Syntax:

background: radial-gradient(shape size at position, color1, color2);

Examples:

• radial-gradient(circle, #667eea 0%, #764ba2 100%)
• radial-gradient(ellipse at center, #f857a6 0%, #ff5858 100%)
• radial-gradient(circle at top left, #ee0979 0%, #ff6a00 100%)

Un dégradé conique crée une transition autour d'un point central. Parfait pour les roues chromatiques et diagrammes.

Syntax:

background: conic-gradient(from angle at position, color1, color2);

Examples:

• conic-gradient(from 0deg, #667eea, #764ba2, #667eea)
• conic-gradient(from 45deg at center, #f857a6 0%, #ff5858 100%)
• conic-gradient(from 90deg, red, yellow, green, blue, red)

Les dégradés CSS sont largement utilisés en web design moderne pour les arrière-plans, boutons et éléments UI.

• Sections hero avec fond dégradé
• Boutons avec dégradés
• Cartes produit
• Overlay dégradé sur images
• Dégradés animés
• Bordures dégradées

Les dégradés fonctionnent bien sur mobile sans fichiers image lourds.

• Barres d'état et navigation
• Écrans splash
• Barres de progression
• Fonds d'écran
• Icônes avec dégradé
• Écrans thématiques

Les dégradés servent à créer des visualisations et graphiques directement dans le navigateur.

• Cartes de chaleur
• Graphiques avec dégradés
• Indicateurs de progression
• Graphiques linéaires
• Sélecteurs de couleurs
• Boutons réseaux sociaux

Tous les navigateurs modernes : Chrome, Firefox, Safari, Edge, Opera. Linéaires et radiaux depuis 2011, coniques depuis 2017.

Non, la syntaxe standard fonctionne dans tous les navigateurs modernes sans -webkit- ni -moz-.

Techniquement sans limite, mais 2-5 sont recommandées. Le générateur supporte jusqu'à 10 couleurs.

Par angle (0-360deg) ou mots-clés (to top, to right). Le générateur a un curseur pour un contrôle précis.

Les dégradés CSS sont très efficaces — rendus par le navigateur sans requêtes HTTP. Bien plus légers que les images.

Utilisez rgba() ou hsla(). Exemple : linear-gradient(90deg, rgba(255,0,0,0.8) 0%, rgba(0,0,255,0.5) 100%)