Générateur de dégradés CSS
Créez un dégradé CSS avec jusqu’à quatre arrêts de couleur, linéaire, radial ou conique, et copiez le code en CSS ou en classes Tailwind v4.
Comment créer un dégradé CSS
- Choisissez linéaire, radial ou conique avec les boutons Type.
- Cliquez sur un arrêt de couleur pour changer sa couleur. Utilisez Ajouter un arrêt et Retirer un arrêt pour travailler avec deux à quatre arrêts.
- Pour un dégradé linéaire, réglez la rotation de 0 à 315 degrés par pas de 45. Appuyez sur Aléatoire pour une nouvelle idée.
- Basculez l’export entre CSS et Tailwind v4, puis appuyez sur le bouton de copie pour emporter le code.
Ce que vous pouvez faire
Trois types de dégradés
Des dégradés linéaires selon un angle, des dégradés radiaux depuis un point central et des dégradés coniques qui tournent autour d’un point.
CSS interpolé en OKLCH
Le CSS contient une version sRGB comprise par tous les navigateurs, suivie du même dégradé interpolé en OKLCH, qui garde le milieu aussi vif que les extrémités dans les navigateurs compatibles.
Export Tailwind v4
Copiez le dégradé sous forme de classes utilitaires Tailwind v4 plutôt qu’en CSS.
Aperçu en direct
L’aperçu se met à jour quand vous changez les couleurs, l’angle et le type.
Partir de la bibliothèque
Ouvrez n’importe quel dégradé de la bibliothèque dans le générateur, avec ses arrêts et son angle déjà chargés.
Questions fréquentes
Comment créer un dégradé CSS ?
Choisissez un type, définissez deux à quatre couleurs et, pour un dégradé linéaire, un angle. Le générateur écrit la déclaration background, que vous copiez dans votre feuille de style.
Quelle est la différence entre les dégradés linéaires, radiaux et coniques ?
Un dégradé linéaire fond les couleurs le long d’une ligne droite selon un angle. Un dégradé radial les fond depuis un point central vers l’extérieur. Un dégradé conique fait tourner les couleurs autour d’un point central, comme une roue chromatique ou un diagramme circulaire.
Pourquoi mon dégradé paraît-il gris ou terne au milieu ?
Fondre deux couleurs saturées en sRGB peut passer par un point médian plus terne. L’interpolation en OKLCH, que le CSS de ce générateur inclut pour les navigateurs compatibles, tend à garder le milieu plus vif.
Puis-je utiliser ces dégradés avec Tailwind CSS ?
Oui. Basculez l’export sur Tailwind v4 et copiez les classes.
Combien d’arrêts de couleur puis-je ajouter ?
De deux à quatre. Pour une rampe plus longue de couleurs distinctes, utilisez le générateur de palettes en dégradé.