Aller au contenu

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

Créez des dégradés linéaires, radiaux ou coniques avec aperçu en direct, ajustez couleurs et arrêts, et copiez le code CSS ou Tailwind prêt à coller.

Type de dégradé

Angle

90°

Arrêts de couleur (2)

  • #2C71DE
  • #051938

Clic pour ajouter · Glisser pour déplacer

background: linear-gradient(90deg, #2C71DE 0%, #051938 100%);

Dégradés CSS prêts à l'emploi

Cliquez sur l'un d'eux pour le charger dans l'éditeur et l'ajuster à votre goût.

Qu'est-ce qu'un dégradé CSS et comment fonctionne-t-il

Un dégradé est une transition douce entre deux couleurs ou plus, utilisée comme fond via la propriété background de CSS. Au lieu d'une couleur unie, le navigateur dessine un mélange progressif entre les couleurs que vous définissez, dans la direction ou la forme choisie.

Chaque couleur du dégradé se définit par un arrêt de couleur : le code de la couleur et le point, en pourcentage, où cette couleur est totalement pure. Entre deux arrêts, le navigateur calcule automatiquement la transition. Deux arrêts suffisent pour un mélange simple, ou ajoutez-en plusieurs pour un dégradé plus nuancé.

Linéaire

Les couleurs passent de l'une à l'autre en ligne droite, selon l'angle défini. C'est le type le plus courant, idéal pour des fonds avec une direction claire, de haut en bas ou en diagonale.

linear-gradient(90deg, #F97316, #FBBF24)

Radial

Les couleurs s'étendent en cercle depuis un point central vers l'extérieur. Il fonctionne bien pour des effets de focus, de lumière ou de profondeur.

radial-gradient(circle, #FDE68A, #F97316 70%)

Conique

Les couleurs tournent autour d'un point central, comme les aiguilles d'une montre. C'est le type le moins courant, utile pour des roues chromatiques, des indicateurs de progression ou des effets plus expérimentaux.

conic-gradient(from 90deg, #F97316, #FBBF24, #14B8A6, #F97316)

Comment écrire un dégradé en CSS

Un dégradé linéaire se déclare avec la fonction linear-gradient() dans la propriété background. Voici ses parties :

135deg
La direction. 0deg va vers le haut, 90deg vers la droite et 180deg vers le bas. Vous pouvez aussi écrire to right ou to bottom right.
#FF5F6D
Chaque couleur du dégradé, dans n'importe quel format CSS : HEX, rgb(), hsl() ou oklch().
0%
La position de l'arrêt : là où la couleur est pure. Si vous l'omettez, le navigateur répartit les couleurs de façon égale.

Les radiaux utilisent radial-gradient(circle, …) et les coniques conic-gradient(from 90deg, …), avec les mêmes arrêts de couleur.

background: linear-gradient(135deg, #FF5F6D 0%, #FFC371 100%);

Comment utiliser le générateur

  1. Choisissez le type

    Linéaire, radial ou conique. Pour les linéaires et coniques, réglez l'angle avec le curseur ou les boutons de direction.

  2. Ajustez couleurs et arrêts

    Sélectionnez un arrêt pour changer sa couleur, faites-le glisser sur la barre pour le déplacer ou cliquez sur la barre pour en ajouter un. Jusqu'à huit arrêts.

  3. Copiez le code

    Copiez le CSS ou son équivalent en classes Tailwind et collez-le dans votre projet. Vous pouvez aussi exporter les couleurs seules.

Conseils pour des dégradés réussis

  • Des couleurs proches sur la roue

    Les couleurs voisines sur la roue chromatique créent des transitions douces et naturelles.

  • Évitez la zone grise

    Entre deux couleurs opposées, le centre devient souvent terne. Ajoutez un arrêt intermédiaire plus vif pour l'éviter.

  • Peu d'arrêts

    Deux ou trois couleurs suffisent pour la plupart des fonds. Plus d'arrêts nuisent souvent à l'élégance.

  • Un texte lisible par-dessus

    Vérifiez le contraste du texte avec la couleur la plus claire et la plus foncée du dégradé.

Questions fréquentes

Utilisez la propriété background avec la fonction linear-gradient(), radial-gradient() ou conic-gradient(), en indiquant la direction et les couleurs. Par exemple : background: linear-gradient(90deg, #2193B0, #6DD5ED);

C'est chacune des couleurs qui composent le dégradé, avec le point (en pourcentage) où cette couleur apparaît pure. Entre deux arrêts, le navigateur calcule la transition automatiquement.

Le linéaire passe d'une couleur à l'autre en ligne droite selon un angle. Le radial s'étend en cercle depuis un point central. Le conique tourne autour d'un point central, comme les aiguilles d'une montre.

Autant que nécessaire, en cliquant sur la barre d'aperçu. Avec deux arrêts, vous obtenez une transition simple ; avec plus, des dégradés à plusieurs tons.

Oui. En plus du code CSS standard, le générateur propose l'équivalent en syntaxe Tailwind, prêt à copier.

Oui, linear-gradient, radial-gradient et conic-gradient sont des propriétés CSS standard, compatibles avec tous les navigateurs modernes.

Appliquez le dégradé au body et donnez-lui au moins la hauteur de la fenêtre : body { min-height: 100vh; background: linear-gradient(180deg, #EE9CA7, #FFDDE1); }

On ne peut pas animer directement le passage d'un dégradé à un autre, mais on peut le déplacer : donnez-lui un background-size plus grand que l'élément (par exemple 200 %) et animez background-position avec une transition ou des @keyframes.

Outils associés