Créez des dégradés CSS linéaires, radiaux ou coniques avec prévisualisation en direct. Ajustez les couleurs et la direction, puis copiez le CSS.
Choisissez un type de dégradé (linéaire, radial ou conique), ajoutez des points de couleur, ajustez leurs positions et voyez le résultat en direct. La propriété CSS background générée est prête à copier-coller directement dans votre projet. Ajoutez autant de points de couleur que nécessaire.
Sélectionnez un type de dégradé, ajustez l'angle (pour linéaire/conique), cliquez sur les échantillons de couleur pour les changer, et faites glisser les curseurs pour définir les positions des points. Cliquez sur + Ajouter une couleur pour plus de points. Copiez le CSS depuis le bloc de code sombre à droite.
Les dégradés méritent leur place lorsqu’ils aident à installer une ambiance, de la profondeur ou de l’emphase sans ajouter une image complète. L’intérêt pratique d’un générateur tient à la vitesse : vous pouvez comparer direction, positions d’arrêt et type de dégradé assez vite pour prendre des décisions de design pendant que l’idée est encore fraîche.
Cet outil garde cette exploration sur le terrain visuel et produit un CSS que vous pouvez réutiliser une fois le rendu trouvé.
Les dégradés peuvent ajouter profondeur et mouvement sans le poids d’une image, mais les grandes surfaces rendent aussi très visibles les mauvais placements de stops et les transitions boueuses.
Boutons, bannières et panneaux mis en avant peuvent gagner avec des dégradés subtils, mais paraître vite datés si la transition est trop agressive.
Utiliser des couleurs de marque dans un dégradé semble simple jusqu’au moment où leur mélange, au centre, ne ressemble plus du tout à la marque.
La plupart des dégradés s’améliorent lorsqu’ils commencent simplement. Plus de stops ne veut pas automatiquement dire plus de finesse.
Les angles et pourcentages de stops sont difficiles à évaluer abstraitement. C’est la prévisualisation en direct qui en fait une vraie décision de design.
Un dégradé peut bien fonctionner seul et devenir mauvais dès qu’on pose dessus du texte, des icônes ou des cartes.
C’est là que les dégradés se justifient souvent : ils donnent une atmosphère à une page sans nécessiter une image lourde.
Si plusieurs composants doivent partager le même langage visuel, copier une valeur CSS exacte est plus propre que de l’approximer à la main à plusieurs endroits.
Ces types de dégradés peuvent être efficaces visuellement, mais il est aussi facile d’en faire trop. Un générateur aide à le constater rapidement.
Cet outil génère du CSS de dégradé. Il ne choisit pas les couleurs de premier plan accessibles, ne construit pas un système couleur complet et ne vous dit pas si l’effet convient à votre mise en page. Il vous donne une valeur exploitable, pas le jugement design complet.
Les dégradés sont faciles à ajouter et étonnamment faciles à rater. La valeur d’un générateur ne tient pas seulement à la vitesse, mais à la réduction d’itérations gaspillées en bricolage de syntaxe.
Un dégradé conique fait tourner les couleurs autour d'un point central. Il est utile pour les graphiques circulaires, les roues de couleurs, les effets de cadran et tout design où les couleurs transitent en arc plutôt qu'en ligne.
Autant que vous voulez — cliquez sur + Ajouter une couleur pour insérer des points supplémentaires. Le CSS est valide quel que soit le nombre de points utilisés.
Cet outil fonctionne entièrement dans votre navegador. Rien de ce que vous tapez ou collez n'est envoyé à un serveur — tout le traitement se fait localement sur votre appareil.