Quelle est la difference entre un degrade lineaire et un degrade radial ?

Un degrade lineaire melange les couleurs le long d'une ligne droite selon l'angle que vous definissez, tandis qu'un degrade radial diffuse les couleurs vers l'exterieur depuis un point central. Changez le type pour voir chacun se mettre a jour dans l'apercu.

Le curseur d'angle fonctionne-t-il pour les degrades radiaux ?

Le curseur d'angle controle la direction d'un degrade lineaire. Pour les degrades radiaux, les couleurs se diffusent depuis le centre, donc l'angle n'a aucun effet visible, mais les deux selecteurs de couleur s'appliquent toujours.

Comment utiliser le CSS genere dans mon projet ?

Copiez la regle generee et collez-la dans votre feuille de style sur l'element souhaite, par exemple comme une propriete background. Aucune bibliotheque ni importation supplementaire n'est necessaire.

Generateur de Degrades CSS

Type

Angle: 90deg

Couleur 1

Couleur 2

CSS

.element {
  background: linear-gradient(90deg, #2b59ff, #ff5e9c);
}

Ce que fait cet outil

Le Generateur de Degrades CSS vous aide a concevoir un degrade a deux couleurs et vous fournit le CSS exact a coller dans votre projet. Il est pratique pour les developpeurs frontend, les designers et toute personne qui construit une page de destination, un bouton, une carte ou une section hero et qui souhaite un fond propre sans ecrire la syntaxe a la main. Vous voyez le resultat pendant que vous l’ajustez, il n’y a donc aucune incertitude sur l’apparence du degrade final.

Comment l’utiliser

Choisissez le type de degrade, lineaire ou radial, pour definir la facon dont les couleurs se melangent.
Faites glisser le curseur d’angle pour faire pivoter la direction d’un degrade lineaire.
Selectionnez votre premiere couleur avec le selecteur de couleur.
Selectionnez votre deuxieme couleur avec le second selecteur de couleur.
Regardez l’apercu en direct et le code CSS se mettre a jour instantanement lorsque vous modifiez n’importe quel reglage.
Copiez la regle generee, comme une ligne background: linear-gradient(…), et collez-la dans votre feuille de style.

Un exemple rapide

Reglez le type sur lineaire, faites glisser l’angle a 90 degres, puis choisissez un violet profond et un bleu doux. L’apercu affiche un fondu de gauche a droite et le code vous donne quelque chose comme background: linear-gradient(90deg, #7c3aed, #60a5fa). Collez cela sur un bouton ou une section et c’est termine. Si un degrade parait plat, essayez de choisir deux couleurs plus eloignees sur la roue chromatique pour plus de contraste.

Tout fonctionne directement dans votre navigateur, vos couleurs restent donc privees, rien n’est televerse et l’outil est entierement gratuit sans inscription.

Questions fréquentes

Quelle est la difference entre un degrade lineaire et un degrade radial ?: Un degrade lineaire melange les couleurs le long d'une ligne droite selon l'angle que vous definissez, tandis qu'un degrade radial diffuse les couleurs vers l'exterieur depuis un point central. Changez le type pour voir chacun se mettre a jour dans l'apercu.
Le curseur d'angle fonctionne-t-il pour les degrades radiaux ?: Le curseur d'angle controle la direction d'un degrade lineaire. Pour les degrades radiaux, les couleurs se diffusent depuis le centre, donc l'angle n'a aucun effet visible, mais les deux selecteurs de couleur s'appliquent toujours.
Comment utiliser le CSS genere dans mon projet ?: Copiez la regle generee et collez-la dans votre feuille de style sur l'element souhaite, par exemple comme une propriete background. Aucune bibliotheque ni importation supplementaire n'est necessaire.