Générateur de dégradés CSS
Concevez visuellement des dégradés linéaires et radiaux, puis copiez le CSS prêt à l'emploi. Tout se met à jour en direct dans votre navigateur.
Comment créer un dégradé CSS
- Choisissez linéaire ou radial, puis définissez l'angle pour un dégradé linéaire.
- Choisissez les couleurs de vos points d'arrêt et définissez chaque position de 0 à 100.
- Ajoutez ou supprimez des points pour modeler la transition comme vous le souhaitez.
- Copiez le CSS généré dans votre feuille de style ou votre attribut style.
FAQ
Qu'est-ce qu'un dégradé linéaire ?
Un dégradé linéaire mélange les couleurs le long d'une ligne droite selon l'angle choisi, de 0 à 360 degrés.
Qu'est-ce qu'un dégradé radial ?
Un dégradé radial mélange les couleurs vers l'extérieur à partir d'un point central, en forme de cercle ou d'ellipse.
Que signifient les chiffres de position ?
Chaque position est un pourcentage le long du dégradé, de 0% au début à 100% à la fin. Les points sont triés par position automatiquement.
Le dégradé fonctionne-t-il dans tous les navigateurs ?
Oui. Le CSS généré utilise les fonctions standard linear-gradient et radial-gradient prises en charge par tous les navigateurs modernes.
Outils associés
Pourquoi utiliser un générateur de dégradés ?
Utilisez le générateur de dégradés CSS pour concevoir visuellement des transitions de couleurs fluides au lieu de deviner les valeurs dans le code, et copiez instantanément du CSS prêt pour la production.
- Observez le dégradé évoluer en direct pendant que vous ajustez les couleurs, les angles et les points.
- Copiez un CSS exact et valide sans chercher d'erreurs de syntaxe.
- Créez en quelques secondes des arrière-plans à plusieurs points pour les boutons, les bannières et les sections.
Conseils et limites
Vous pouvez ajouter autant de points d'arrêt que vous le souhaitez, et le générateur en conserve au moins deux pour que le dégradé soit toujours valide. Les points sont triés par position avant la génération du CSS.