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

Utilisez une fonction de dégradé comme arrière-plan, par exemple background: linear-gradient(90deg, #ff6b6b 0%, #feca57 100%). Ici, vous choisissez le type, l'angle et les arrêts, et l'outil écrit cette ligne que vous n'avez plus qu'à copier dans votre feuille de style.

90deg va de gauche à droite. 0deg va de bas en haut, 180deg de haut en bas et 270deg de droite à gauche. La valeur par défaut ici est 135deg, du haut à gauche vers le bas à droite. Vous pouvez saisir n'importe quel nombre, y compris des valeurs négatives.

Saisissez une couleur transparente dans le champ de texte d'un arrêt, par exemple rgba(255,255,255,0) pour un fondu vers du blanc transparent ou rgba(0,0,0,0) pour du noir transparent. Le code la conserve telle que saisie. Le sélecteur de couleur ne peut pas afficher la transparence et affiche du noir à la place.

Le linéaire fond les couleurs le long d'une ligne droite selon un angle. Le radial les diffuse à partir d'un point central. Le conique les fait tourner autour d'un centre comme l'aiguille d'une horloge, ce qui convient aux camemberts et aux cercles chromatiques. Cet outil dessine les dégradés radiaux sous forme de cercle centré.

Pas encore dans l'outil, car la sortie radiale est toujours radial-gradient(circle, ...) depuis le centre. Après la copie, modifiez le code : remplacez circle par ellipse, ou écrivez circle at 30% 20% pour déplacer le centre. Les arrêts restent identiques.

Non. Tous les navigateurs actuels prennent en charge les dégradés linéaires et radiaux sans préfixe, et les dégradés coniques fonctionnent dans Chrome 69, Safari 12.1, Firefox 83 et versions ultérieures. Cet outil n'ajoute jamais de préfixes : la ligne copiée contient uniquement la syntaxe standard.

Placez deux arrêts à la même position. Par exemple, #000000 à 50 % et #ffffff à 50 % donnent une ligne nette au lieu d'un fondu. Ajoutez d'autres paires pour obtenir des rayures. Le code trie les arrêts par position, et les arrêts situés au même endroit conservent l'ordre dans lequel vous les avez ajoutés.

Il n'y a aucune limite. Ajouter un arrêt place un nouvel arrêt à mi-chemin entre le premier arrêt et le dernier ajouté : faites donc glisser chaque nouvel arrêt à l'endroit voulu. Vous pouvez supprimer des arrêts jusqu'à ce qu'il n'en reste que deux.

L'outil génère du CSS standard, pas des classes Tailwind. Collez le dégradé dans une valeur arbitraire en remplaçant les espaces par des tirets bas, par exemple bg-[linear-gradient(135deg,#6366f1_0%,#8b5cf6_100%)], ou ajoutez-le à votre thème comme image d'arrière-plan.

Cet outil crée des dégradés d'arrière-plan, mais vous pouvez réutiliser le code pour du texte. Appliquez la ligne background copiée à l'élément de texte, puis ajoutez background-clip: text, -webkit-background-clip: text et color: transparent pour que le dégradé apparaisse à travers les lettres.

Oui. Il est gratuit, sans compte ni limite d'utilisation. Vos couleurs et vos réglages restent dans votre navigateur et ne sont pas enregistrés : un rechargement remet tout à zéro. Sur le site en ligne, Google Analytics comptabilise les clics sur « Copier le CSS », jamais le dégradé lui-même.