Générateur de dégradé CSS multi-étapes
Composez un dégradé CSS avec autant d'arrêts de couleur que nécessaire, un type (linéaire ou radial) et un angle réglable, avec aperçu en direct. Le code est calculé et affiché entièrement dans votre navigateur.
Comment ça marche
Au-delà de deux couleurs, un dégradé CSS devient beaucoup plus riche visuellement : trois arrêts ou plus permettent de créer des transitions type coucher de soleil, effet holographique ou arrière-plan de landing page moderne. Cet outil vous laisse ajouter, positionner (en pourcentage) et supprimer librement chaque arrêt de couleur, avec un aperçu mis à jour en temps réel et le code CSS exact à copier.
Quelle est la différence entre un dégradé linéaire et radial ?
Le dégradé linéaire (linear-gradient) progresse en ligne droite selon un angle défini, tandis que le dégradé radial (radial-gradient) part d'un point central et s'étend en cercle vers l'extérieur, un effet souvent utilisé pour des halos de lumière ou des fonds de section circulaires.
À quoi correspond la position d'un arrêt de couleur ?
La position (en pourcentage) indique à quel endroit du dégradé la couleur atteint sa pleine intensité avant de commencer à se fondre dans l'arrêt suivant. Rapprocher deux arrêts crée une transition plus nette entre leurs couleurs, tandis que les espacer produit un fondu plus progressif.
Traitement 100% local : la composition du dégradé et la génération du code se font directement dans votre navigateur, sans aucun envoi de données.