Générateur de Dégradés CSS
Créez de beaux dégradés CSS visuellement. Choisissez le type linéaire, radial ou conique, ajoutez des arrêts de couleur, ajustez l'angle et obtenez un aperçu en direct. Copiez le CSS en un clic.
Arrêts de couleur
Aperçu
CSS
Tout fonctionne dans votre navigateur — aucune donnée n’est envoyée.
Comment utiliser le générateur de dégradés
- Choisissez le type de dégradé — linéaire, radial ou conique.
- Définissez vos couleurs et positions avec les sélecteurs de couleur et les curseurs d'arrêt.
- Ajustez l'angle (linéaire) ou la forme (radial), puis copiez le CSS.
Les Dégradés CSS Expliqués
Les dégradés CSS sont rendus par le navigateur à l'aide de mathématiques plutôt que de pixels — ils sont infiniment évolutifs et se chargent instantanément.
Les dégradés linéaires sont les plus courants. Avec plusieurs arrêts, vous pouvez créer des effets complexes comme des ciels de lever de soleil ou des dégradés de marque.
Les dégradés coniques font tourner les couleurs autour d'un point central — parfaits pour les graphiques circulaires, les roues chromatiques et les motifs en étoile.
Questions fréquentes
Qu'est-ce qu'un dégradé CSS ? ▼
Une transition de couleur fluide générée en CSS avec linear-gradient(), radial-gradient() ou conic-gradient() — sans fichier image.
Différence entre linéaire, radial et conique ? ▼
Linéaire : le long d'une ligne droite. Radial : depuis un point central vers l'extérieur. Conique : en tournant autour d'un point central.
Comment changer l'angle d'un dégradé linéaire ? ▼
Utilisez le champ d'angle (0–360°). À 90deg le dégradé va de gauche à droite ; à 180deg de haut en bas.
Que sont les arrêts de couleur ? ▼
Chaque arrêt définit une couleur et sa position (0%–100%). Plusieurs arrêts créent des dégradés multicolores.
Comment créer un dégradé transparent ? ▼
Définissez l'alpha d'un arrêt de couleur à 0 avec rgba() ou le mot-clé CSS transparent.
Compatibilité des navigateurs ? ▼
Tous les navigateurs modernes supportent les dégradés linéaires, radiaux et coniques sans préfixes de fournisseur.
Puis-je utiliser des dégradés comme remplissages de texte ? ▼
Oui : définissez le fond sur votre dégradé, puis appliquez background-clip: text et color: transparent.
Comment créer un dégradé répétitif ? ▼
Utilisez repeating-linear-gradient() ou repeating-radial-gradient() avec des arrêts de couleur définis.
Outils connexes
Générateur d'Ombres CSS
Concevez des ombres CSS visuellement avec aperçu en direct. Ajustez le décalage, le flou, l'étalement et la couleur, puis copiez le CSS prêt à l'emploi instantanément.
Générateur de Glassmorphisme
Générez des effets CSS de glassmorphisme avec contrôles de flou et de transparence. Aperçu en direct et CSS prêt à copier pour des designs de verre dépoli.
Générateur de Triangles CSS
Créez des triangles CSS purs avec la technique du border hack. Choisissez la direction, la taille et la couleur avec aperçu et CSS prêt à copier.