Dev Tools

Générateur Dégradé CSS

Créez des dégradés CSS linéaires ou radiaux avec prévisualisation en temps réel.

Presets populaires

#6366f1
#8b5cf6
135°
0° 90° 180° 270° 360°

Code CSS

background: linear-gradient(135deg, #6366f1, #8b5cf6);

Optimisez vos meta tags ?

Générez title, description, Open Graph et Twitter Cards en un clic.

Générer des meta tags

Estimation indicative. Ne constitue pas un conseil fiscal ou financier. Consultez un professionnel pour votre situation personnelle.

Questions fréquentes

Qu'est-ce qu'un dégradé CSS ?

Un dégradé CSS (gradient) est une transition progressive entre deux couleurs ou plus, générée directement par le navigateur sans image. Il existe deux types principaux : le dégradé linéaire (linear-gradient), qui suit une direction, et le dégradé radial (radial-gradient), qui rayonne depuis un centre.

Quelle est la différence entre dégradé linéaire et radial ?

Un dégradé linéaire (linear-gradient) transite dans une direction définie par un angle (0° = vers le haut, 90° = vers la droite). Un dégradé radial (radial-gradient) rayonne depuis le centre vers l'extérieur, créant un effet circulaire ou elliptique.

Comment utiliser le CSS généré dans mon projet ?

Copiez le code CSS généré et appliquez-le à n'importe quel élément HTML via la propriété background ou background-image. Par exemple : .mon-element { background: linear-gradient(90deg, #ff6b6b, #4ecdc4); }.

Compatible avec tous les navigateurs modernes sans préfixes vendeur.

Puis-je utiliser des dégradés CSS sur du texte ?

Oui ! Pour appliquer un dégradé CSS sur du texte, utilisez : background: linear-gradient(...); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;.

Cela crée un effet de texte dégradé moderne très populaire.

Les dégradés CSS affectent-ils les performances ?

Non, les dégradés CSS sont générés par le GPU et sont très performants : bien plus que des images PNG ou JPG. Ils s'adaptent à toutes les résolutions (retina inclus) et réduisent le nombre de requêtes HTTP.

CSS gradient generator : créer des dégradés CSS performants

Qu'est-ce qu'un dégradé CSS ?

Un dégradé CSS (gradient) est une transition progressive entre deux couleurs ou plus, générée nativement par le navigateur via la propriété background ou background-image. Contrairement aux images bitmap (PNG, JPG), les dégradés CSS sont vectoriels : ils s'adaptent à toutes les résolutions (y compris Retina) sans pixellisation et ne nécessitent aucune requête HTTP supplémentaire.

La spécification CSS Images Module Level 3 (W3C) définit deux types principaux de dégradés : le linear-gradient (dégradé linéaire) et le radial-gradient (dégradé radial). CSS Images Level 4 ajoute le conic-gradient (dégradé conique), utilisé notamment pour les diagrammes circulaires.

background: linear-gradient(angle, couleur1, couleur2);

Dégradé linéaire vs radial

Linéaire

Directionnel

Transition sur un axe (angle en degrés)

Radial

Circulaire

Transition du centre vers l'extérieur

Le dégradé linéaire transite selon une direction définie par un angle. Par convention CSS, 0deg pointe vers le haut, 90deg vers la droite, 180deg vers le bas. Vous pouvez aussi utiliser des mots-clés : to right, to bottom left, etc. Le dégradé radial rayonne depuis un point central et accepte des formes circulaires (circle) ou elliptiques (ellipse).

98,5 %

des navigateurs supportent les dégradés CSS sans préfixes vendeur (source : Can I Use, 2026)

Syntaxe avancée des dégradés CSS

Au-delà de deux couleurs, les dégradés CSS acceptent des fonctionnalités avancées :

Fonctionnalités des dégradés CSS

Stops multiples Support : Universel

linear-gradient(90deg, red, yellow, green)

Positions de stop Support : Universel

linear-gradient(90deg, red 20%, blue 80%)

Transition nette Support : Universel

linear-gradient(90deg, red 50%, blue 50%)

Dégradé conique Support : 96 %

conic-gradient(from 0deg, red, blue)

Interpolation oklch Support : 85 %

linear-gradient(in oklch, red, blue)

Source : W3C CSS Images Module Level 3 et 4

Dégradés CSS sur du texte

Une technique populaire consiste à appliquer un dégradé sur du texte pour créer un effet visuel accrocheur. Le principe repose sur trois propriétés CSS combinées :

  • background: linear-gradient(...) : le dégradé est appliqué comme arrière-plan.
  • -webkit-background-clip: text et background-clip: text : le fond est découpé à la forme du texte.
  • -webkit-text-fill-color: transparent : le texte devient transparent, laissant apparaître le dégradé.

Cette technique est supportée par tous les navigateurs modernes. Le préfixe -webkit- reste nécessaire pour background-clip: text dans certains navigateurs.

Performance

Les dégradés CSS sont rendus par le GPU et sont extrêmement performants. Ils sont toujours préférables aux images pour les fonds simples : pas de requête HTTP, pas de poids de fichier, adaptation automatique à toutes les résolutions. Combinez-les avec notre générateur de meta tags pour un site complet.

Erreurs fréquentes à éviter

  • Dégradés sur fond de texte sans fallback. Si le background-clip: text n'est pas supporté, le texte sera invisible. Ajoutez toujours une couleur de texte en fallback.
  • Transitions trop brusques. Un dégradé entre deux couleurs complémentaires (rouge/vert) peut passer par des teintes grisâtres. Utilisez l'espace de couleur oklch pour des transitions perceptuellement uniformes.
  • Oublier les préfixes pour background-clip: text. Le préfixe -webkit- reste requis en 2026 pour une compatibilité maximale avec Safari et certains WebView.
  • Images de fond au lieu de dégradés. Remplacez les images de fond dégradées par du CSS natif : meilleure performance, adaptation responsive et aucun poids de fichier.

Sources et références

Dev & Tech

Convertisseur CSV vers JSON
Encodeur/Décodeur Base64
Calculateur Chmod
Générateur UUID
Générateur Meta Tags
Générateur Expression Cron

Sources : W3C CSS Images Module Level 3 · MDN Web Docs · Can I Use. Compatible avec tous les navigateurs modernes (Chrome, Firefox, Safari, Edge). Dernière mise à jour : avril 2026.