Mode d’emploi
- Partez d’un modèle ou du dégradé par défaut.
- Cliquez sur la barre pour ajouter des couleurs ; faites glisser les points pour les déplacer.
- Choisissez Linéaire, Radial ou Conique et ajustez l’angle ou le centre.
- Copiez la déclaration CSS ou la classe Tailwind.
Explication des options
- Linéaire
- Les couleurs changent le long d’une ligne droite. 0° va vers le haut, 90° vers la droite et 180° vers le bas.
- Radial
- Les couleurs s’étendent depuis un point central, en cercle ou en ellipse ajustée à l’élément.
- Conique
- Les couleurs tournent autour d’un point central, comme une roue chromatique ou un diagramme circulaire.
- Répéter
- Répète le motif ; placez les points dans une plage courte, par exemple de 0 % à 10 %, pour créer des rayures.
À quoi ressemble le code généré
Les deux mêmes couleurs, écrites par chaque type. Les arrêts sont toujours écrits avec une position en pourcentage :
linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%)
radial-gradient(ellipse at 50% 50%, #ff7e5f 0%, #feb47b 100%)
conic-gradient(from 0deg at 50% 50%, #ff7e5f 0%, #feb47b 100%)
repeating-linear-gradient(45deg, #000000 0%, #ffffff 10%)La version Tailwind place la même valeur dans une classe à valeur arbitraire. Les espaces deviennent des tirets bas et les espaces après les virgules sont supprimés :
bg-[linear-gradient(135deg,#ff7e5f_0%,#feb47b_100%)]Dans la dernière ligne CSS, le motif se répète tous les 10 % de l’élément, ce qui donne de fines rayures. Pour les dégradés coniques, l’angle est le point de départ du balayage ; pour les dégradés radiaux, les deux pourcentages désignent le centre.
Questions fréquentes
Quels navigateurs prennent en charge ces dégradés ?
Les dégradés linéaires, radiaux et coniques fonctionnent dans toutes les versions actuelles de Chrome, Edge, Firefox et Safari, sans préfixes propriétaires.
Comment créer un dégradé transparent ?
Saisissez une couleur avec un canal alpha, par exemple #00000000 pour un noir totalement transparent, dans le champ de couleur d’un point.
Comment utiliser la classe Tailwind ?
Ajoutez-la à la liste de classes d’un élément avec Tailwind CSS 3 ou 4. Elle utilise une valeur arbitraire, aucune configuration n’est donc nécessaire.
Confidentialité
Cet outil fonctionne entièrement dans votre navigateur. Vos fichiers et vos textes sont traités sur votre appareil et ne sont jamais envoyés à nos serveurs.