🌈

générateur dégradé CSS

Créez visuellement des dégradés CSS linéaires et radiaux. Ajoutez des arrêts de couleur, ajustez les positions, définissez l’angle et copiez le CSS prêt à l’emploi en un clic.

Outils de génération Fonctionne localement Aucune donnée envoyée
Dégradé CSSDégradé linéaireDégradé radialArrêts de couleur
Type de dégradé
Angle
Arrêts de couleur
Aperçu
Sortie CSS
background: linear-gradient(135deg, #7c6af7 0%, #06b6d4 100%);

Qu'est-ce que le générateur dégradé CSS ?

Le générateur dégradé CSS est un outil visuel pour créer des dégradés CSS linéaires et radiaux. Vous ajoutez des arrêts de couleur, définissez leur position sur une échelle de 0—00 %, choisissez un angle pour les dégradés linéaires et visualisez le résultat en direct. La propriété CSS finale est prête à être collée dans n'importe quelle feuille de style.

Comment utiliser le générateur dégradé CSS

  1. Choisissez le type de dégradé linéaire ou radial.
  2. Pour les dégradés linéaires, réglez l'angle à l'aide du curseur.
  3. Modifiez les arrêts de couleur par défaut en cliquant sur les sélecteurs de couleur et en ajustant les positions.
  4. Ajoutez d'autres arrêts de couleur avec le bouton "Ajouter un arrêt de couleur" si nécessaire.
  5. Cliquez sur "Copier le CSS" pour copier la propriété de dégradé dans votre presse-papiers.

Outils associés

🎨
extraire palette image
Extraire une palette compacte de couleurs HEX dominantes d'une image
 ☀️
luminosité contraste image
Ajustez la luminosité et le contraste d'une photo avec un aperçu instantané
 🌓
image duotone
Associez les ombres et les hautes lumières de l'image à deux couleurs personnalisées
Syntaxe des dégradés CSS ▾
Exemple
Entrée Linéaire, 135°, arrêt 1 : #7c6af7 à 0%, arrêt 2 : #06b6d4 à 100%
Sortie background: linear-gradient(135deg, #7c6af7 0%, #06b6d4 100%);
Cas d’utilisation courants
  • Générez des dégradés d'arrière-plan pour les pages de destination et les composants d'interface.
  • Créez des superpositions de dégradé pour les sections hero.
  • Créez des motifs d'arrêts de couleur pour les graphiques ou les séparateurs.
  • Prototypez des idées de dégradé avant de les transférer dans un outil de design.
Questions fréquentes
Quels types de dégradé sont pris en charge ?

Les dégradés linéaires avec un angle personnalisé (0—60°) et les dégradés radiaux (forme circulaire) sont tous deux pris en charge.

Puis-je ajouter plus de deux arrêts de couleur ?

Oui. Cliquez sur "Ajouter un arrêt de couleur" pour ajouter autant d'arrêts que nécessaire. Chaque arrêt possède une couleur et une position indépendantes.

Comment contrôler la direction d'un dégradé linéaire ?

Utilisez le curseur d'angle. 0° va du haut vers le bas, 90° de gauche à droite et 135° en diagonale.

Le résultat est-il compatible avec tous les navigateurs ?

Yes. The tool outputs standard CSS using the linear-gradient() and radial-gradient() functions which are supported by all modern browsers.