Stax

Générateur de Dégradé CSS

Construisez visuellement des dégradés CSS linéaires et radiaux et copiez le CSS prêt à l'emploi.

0°90°180°270°360°
#6366f1
0%
#ec4899
100%
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);

Qu'est-ce que le générateur de gradients CSS ?

Cet outil visuel crée gradients CSS linéaires, radiaux et coniques. Avec aperçu en direct ajustez stops de couleur, angles, positions. Pour fonds, boutons, sections hero — obtenez CSS prêt à utiliser.

Comment utiliser le générateur

  1. Sélectionnez type de gradient (Linéaire/Radial/Conique).
  2. Ajoutez couleurs et positions de stop.
  3. Ajustez angle/direction.
  4. Voir aperçu en direct.
  5. Copiez le CSS généré.

Types de gradients

  • Linéaire — transition en ligne droite (haut→bas)
  • Radial — circulaire (centre → bords)
  • Conique — effet camembert (rotation)
  • Stops multiples — mélanges multi-couleurs complexes

Questions fréquemment posées

Différence entre gradient linéaire et radial ?
Le gradient linéaire fait transition de couleurs en ligne droite (haut→bas, gauche→droite, etc.). Le radial est circulaire (du centre vers l'extérieur). Linéaire pour fonds, boutons. Radial pour spotlights, effets sunburst. Gradient conique pour effets de camembert.
Combien de couleurs peut avoir un gradient ?
Pratiquement illimité. Commun : 2-3 couleurs. Chaque couleur peut avoir position de stop (0%, 50%, 100%). Exemple : linear-gradient(to right, red 0%, yellow 50%, blue 100%). Pour gradients subtils choisissez couleurs proches.
Comment est le support navigateur ?
Les navigateurs modernes (Chrome, Firefox, Safari, Edge) supportent tous gradients linéaires, radiaux, coniques. Pour vieux IE des préfixes vendor (-webkit-, -moz-) sont générés. Cet outil donne syntaxe moderne propre — parfait pour 99% d'utilisateurs.
Quel impact sur la performance ?
Les gradients CSS sont plus rapides que les images (sans requête HTTP, sans taille de fichier). Rendus depuis GPU — fluides. Meilleure façon de remplacer images de fond. Beaucoup de gradients sur une page peuvent affecter performance — mesurez.

Outils associés