Créez des dégradés CSS linéaires, radiaux et coniques avec plusieurs arrêts de couleur et copiez le code.

Aperçu
Sortie CSS
background: ;

Tout s'exécute dans votre navigateur — aucun envoi, aucune inscription.

Type de dégradé
deg
Arrêts de couleur Cliquez sur la barre pour ajouter un arrêt, faites glisser pour déplacer
Arrêt sélectionné
Couleur de l'arrêt
100%
%
Préréglages

À propos de Générateur de dégradés CSS

Le générateur de dégradés CSS crée des dégradés linéaires, radiaux et coniques avec un contrôle visuel complet. Ajoutez des points de couleur en cliquant sur la barre de dégradé, faites-les glisser pour les repositionner, et donnez à chaque point sa propre couleur, opacité et position. Les dégradés linéaires reçoivent un contrôle d'angle; les radiaux une forme (cercle ou ellipse) et une position; les coniques un angle de départ.

L'aperçu en direct montre exactement ce que le navigateur rendra, et un bouton aléatoire ainsi qu'une sélection de préréglages soignés sont là quand vous avez besoin d'un point de départ plutôt que d'une page blanche. Les points peuvent être ajoutés et supprimés librement — un dégradé nécessite simplement au moins deux points.

Une fois le rendu satisfaisant, copiez la valeur de dégradé brute ou une règle CSS complète. Le générateur fonctionne entièrement dans votre navigateur, sans téléversement ni inscription, ce qui en fait un compagnon rapide pour les boutons, arrière-plans de héros, bordures et effets de texte.

Comment utiliser Générateur de dégradés CSS

  1. Choisissez le type de dégradé: linéaire, radial ou conique.
  2. Réglez l'angle (linéaire), la forme et la position (radial), ou l'angle de départ (conique).
  3. Cliquez sur la barre de dégradé pour ajouter des points de couleur et faites-les glisser en position.
  4. Donnez à chaque point sa couleur, son opacité et sa position exacte.
  5. Essayez les préréglages ou le bouton aléatoire pour une inspiration rapide.
  6. Copiez la valeur de dégradé ou la règle CSS complète.

Questions fréquentes

Les dégradés linéaires mélangent les couleurs le long d'une ligne droite selon un angle. Les dégradés radiaux rayonnent vers l'extérieur depuis un point central en cercle ou en ellipse. Les dégradés coniques font tourner les couleurs autour d'un point central — le type derrière les diagrammes circulaires et les roues chromatiques.

Au moins deux, sans limite supérieure pratique. Deux ou trois points créent des arrière-plans nets; des points rapprochés créent des bandes de couleur nettes, c'est ainsi que sont construits les effets rayés et segmentés.

Oui — chaque point a son propre contrôle d'opacité. Un point à 0 % d'opacité fait disparaître le dégradé, ce qui est la méthode standard pour mélanger une superposition teintée sur une photo ou fondre une section héros dans l'arrière-plan de la page.

Pas directement — les navigateurs ne peuvent pas faire de transition entre des valeurs de dégradé. Les astuces habituelles: animer background-position sur un dégradé surdimensionné, faire pivoter un dégradé conique avec une propriété personnalisée, ou faire un fondu enchaîné entre deux éléments superposés.

Oui, gratuit et illimité. Il fonctionne entièrement dans votre navigateur, donc rien de ce que vous concevez n'est stocké ni transmis.


Recherches populaires
générateur de dégradé css générateur de dégradé linéaire css dégradé radial css dégradé conique css créateur de dégradé d'arrière-plan css outil d'arrêts de couleur de dégradé sélecteur d'angle de dégradé css générateur de dégradé en ligne
Besoin d'aide ?
Un problème avec cet outil ? Signalez-le à notre équipe.
Signaler un problème

Ajoutez cet outil gratuit à votre propre site web — copiez-collez le code ci-dessous.