logoColorTinder

Générateur de Dégradés

Créez de beaux dégradés CSS et Tailwind avec un éditeur visuel intuitif

Type

Angle

135°

Presets

Couleurs

%
%
.element {
  background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
}
linear-gradient(135deg, #6366f1 0%, #ec4899 100%)

Questions Fréquentes

Quelle est la différence entre les dégradés linéaires, radiaux et coniques ?

Les dégradés linéaires font transitionner les couleurs le long d'une ligne droite. Les dégradés radiaux rayonnent depuis un point central vers l'extérieur. Les dégradés coniques font tourner les couleurs autour d'un point central, comme une roue chromatique.

Comment utiliser le dégradé dans Tailwind CSS ?

Passez à l'onglet Tailwind et copiez les noms de classes générés. Collez-les directement dans n'importe quel projet Tailwind — aucune configuration supplémentaire n'est nécessaire pour les couleurs standard.

Puis-je ajouter plus de deux points de couleur ?

Oui — cliquez sur 'Ajouter Couleur' pour ajouter autant de points que vous le souhaitez, puis faites glisser ou saisissez des positions exactes pour contrôler précisément où chaque couleur apparaît dans le dégradé.

Puis-je utiliser le dégradé dans React ou d'autres frameworks ?

Absolument. Le code CSS fonctionne partout où vous pouvez appliquer des styles, y compris les styles en ligne React, Vue, Svelte, HTML simple ou toute feuille de style CSS.