Générateur CSS Gradient
Générez de beaux gradients CSS avec prévisualisation en direct. Créez des gradients linéaires, radiaux et coniques avec des couleurs, angles et positions personnalisés. Copiez le CSS prêt à l'emploi.
Gradient type
135°
Color stops
#667eea0%
#764ba2100%
Presets
CSS Output
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
Comment utiliser Générateur CSS Gradient
- 1Choisissez le type de gradient : linéaire, radial ou conique.
- 2Ajoutez des arrêts de couleur et définissez leurs positions.
- 3Ajustez l'angle ou la direction pour les gradients linéaires.
- 4Copiez le CSS généré pour l'utiliser dans votre projet.
ZenovayAnalytics
Sachez ce que vos visiteurs font vraiment.
- Suivi des visiteurs en temps réel
- Vie privée d'abord, sans bandeau cookies
- Installé en deux minutes
Outils connexes
Générateur de gradient CSS
Créez de beaux gradients CSS avec un éditeur visuel. Gradients linéaires, radiaux et coniques.Générateur d'Ombre de Boîte CSS
Concevez des ombres de boîte CSS avec des contrôles visuels. Ajustez le décalage, le flou, l'étalement et la couleur.Générateur de Rayon de Bordure CSS
Créez des valeurs de rayon de bordure personnalisées avec des contrôles visuels. Liez ou dissociez les coins pour un ajustement rapide.Zone de jeu CSS Flexbox
Apprenez et générez des mises en page CSS Flexbox visuellement. Ajustez la direction, l'alignement, l'enveloppe et l'écart en temps réel.Questions fréquemment posées
Qu'est-ce qu'un dégradé CSS ?▾
Un dégradé CSS est une transition fluide entre deux couleurs ou plus, créée sans fichiers image. Types : linear-gradient() — couleurs le long d'une ligne droite à un angle spécifié ; radial-gradient() — couleurs rayonnant vers l'extérieur depuis un point central ; conic-gradient() — couleurs balayées autour d'un point central (comme un camembert, supporté dans tous les navigateurs modernes) ; les variantes repeating-* répètent le motif. Les dégradés sont des valeurs pour la propriété background-image, pas background-color.
Comment fonctionne linear-gradient ?▾
Syntaxe : linear-gradient(direction, arrêt-couleur1, arrêt-couleur2, ...). Direction : angle (0deg = bas vers haut, 90deg = gauche vers droite) ou mot-clé (to right, to bottom left). Arrêts de couleur : couleurs avec positions optionnelles. Exemple : linear-gradient(135deg, #ff6b6b 0%, #ffd93d 50%, #6bcb77 100%). Sans positions, les arrêts sont répartis uniformément. Avec positions : linear-gradient(to right, red 20%, blue 80%) signifie 20% rouge, puis transition, puis 80% bleu jusqu'à la fin.
Que sont les indices de couleur dans les dégradés ?▾
Les indices de couleur (également appelés indices de transition ou points médians) contrôlent où se situe le point médian de la transition de dégradé. Normalement, les transitions sont linéaires entre les arrêts — le point médian est exactement entre deux couleurs à 50%. Un indice déplace ce point médian. Exemple : linear-gradient(to right, red, 25%, blue) — le point médian de la transition rouge-bleu est à 25% (plus proche du côté rouge), le faisant paraître plus bleu dans l'ensemble. Supporté dans tous les navigateurs modernes.
Quelle est la différence entre les dégradés radiaux et coniques ?▾
radial-gradient() rayonne depuis un point central vers l'extérieur en formes elliptiques ou circulaires. Syntaxe : radial-gradient(forme taille at position, couleurs). Exemple : radial-gradient(circle at center, white, black). conic-gradient() balaie les couleurs autour d'un point central comme une roue chromatique ou un camembert. Syntaxe : conic-gradient(from angle at position, couleurs). Exemple : conic-gradient(red, yellow, green, blue, red). Les deux supportent des arrêts de couleur avec des positions en pourcentage.
Comment utiliser les dégradés dans Tailwind CSS ?▾
Tailwind supporte les dégradés linéaires via : bg-gradient-to-{direction} (ex. bg-gradient-to-r) + from-{couleur} + via-{couleur} (optionnel) + to-{couleur}. Exemple : class="bg-gradient-to-r from-purple-400 via-pink-500 to-red-500". Pour les dégradés radiaux/coniques ou les dégradés personnalisés complexes, utilisez la syntaxe [valeur arbitraire] : bg-[radial-gradient(circle,_#ff6b6b,_#4158d0)] ou ajoutez un dégradé personnalisé à tailwind.config.js sous backgroundImage. Tailwind v3.3+ a amélioré le support des dégradés arbitraires.