Concevoir un Dégradé CSS avec Aperçu
Concevez un dégradé CSS en choisissant couleurs, angle et type, prévisualisez en direct et copiez le code.
#6366f1#ec4899background: linear-gradient(90deg, #6366f1, #ec4899);Assemblé en local
Sûr pour une identité non dévoilée
Sans compte
Connexion sécurisée
Comment ça marche
- 1
Choisissez vos couleurs
Définissez la couleur de départ et d’arrivée, et ajoutez des arrêts intermédiaires si la transition doit être guidée.
- 2
Réglez la direction ou la forme
Choisissez un angle pour un dégradé linéaire, ou une forme et une position pour un radial.
- 3
Copiez le CSS
Reportez la déclaration `background` générée directement dans votre feuille de style.
Pourquoi cet outil
Le voir pendant qu’on le compose
Un dégradé se juge à son milieu, pas à ses extrémités — l’aperçu en direct montre précisément la partie qui se dégrade.
CSS prêt à coller
La sortie est une déclaration `background` valide et correctement formatée, sans retouche avant collage.
Linéaire et radial
Les deux types, avec réglage de l’angle ou de la forme, ce qui couvre presque tous les dégradés dont un site a besoin.
Plusieurs arrêts de couleur
Ajoutez des arrêts pour piloter le trajet entre les couleurs au lieu de subir ce que donne le milieu.
Rien n’est envoyé
La déclaration est assemblée dans votre navigateur — aucune valeur de couleur ne part ailleurs.
Gratuit et sans compte
Aucune inscription, aucune limite, aucun filigrane.
Le milieu terne, et pourquoi il apparaît
La déception la plus courante avec les dégradés tient à ce que deux couleurs séduisantes produisent entre elles une bande grise-brune éteinte. Ce n’est pas un échec de conception mais un fait mathématique : les navigateurs interpolent les dégradés en sRGB, en mélangeant les canaux rouge, vert et bleu séparément et en ligne droite. Mélangez ainsi un bleu saturé et un jaune saturé : le milieu contient des quantités moyennes des trois canaux, ce qui est la définition du gris. L’effet est le plus marqué entre couleurs éloignées sur le cercle des teintes — bleu vers jaune, rouge vers vert — et presque imperceptible entre voisines. Y voir de l’arithmétique plutôt qu’une question de goût est ce qui rend le problème réparable.
Le corriger par un arrêt intermédiaire
Le remède pratique consiste à cesser de laisser le navigateur choisir le trajet. Ajoutez un arrêt de couleur au milieu et réglez-le sur la teinte par laquelle la transition doit passer : un dégradé du bleu au jaune acheminé par un vert ou un turquoise reste vif sur tout le parcours, parce que vous avez indiqué à l’interpolation où aller au lieu de la laisser couper par le centre neutre. Choisir cette couleur médiane est le plus simple en HSL, où l’on prend un angle de teinte entre les deux extrémités en gardant une saturation élevée ; le convertisseur de couleur transforme cette valeur en le HEX que réclame la déclaration. Un arrêt bien placé sauve la plupart des dégradés délavés.
Linéaire ou radial, et quand choisir l’un ou l’autre
Un dégradé linéaire suit un axe droit selon l’angle que vous fixez — 180deg de haut en bas, 90deg de gauche à droite, et tout ce qui se trouve entre. C’est le bon choix pour un fond de page, un bandeau d’en-tête ou le remplissage d’un bouton, parce que l’œil le lit comme une surface et non comme un objet. Un dégradé radial rayonne depuis un point, ce qui se lit comme une source lumineuse ou une lueur. Le radial convient à un effet de projecteur derrière un élément central et échoue en fond de page entière, où il évoque un vignettage que personne n’a demandé. En cas d’hésitation, la réponse est presque toujours linéaire.
Dégradés et texte cohabitent difficilement
Un dégradé derrière du texte est l’un des échecs d’accessibilité les plus constants du web, pour une raison structurelle : l’exigence de contraste s’applique en chaque point que le texte traverse, et un dégradé possède par définition un fond différent à chaque point. Un titre qui franchit 4,5:1 face à l’extrémité claire peut tomber sous 3:1 face à l’extrémité sombre, et la mesure conforme d’un côté ne dit rien de l’autre. Testez la couleur du texte contre les deux extrémités avec le vérificateur de contraste ; si l’une échoue, la solution est un bandeau plein derrière le texte, pas une autre couleur de texte.
C’est la retenue qui rend un dégradé actuel
Les dégradés qui se lisent comme contemporains sont presque toujours discrets : deux nuances d’une même teinte séparées de quelques paliers de luminosité, appliquées à une grande surface. Ceux qui paraissent datés sont très contrastés, multi-teintes et appliqués à de petits éléments. Si vous disposez d’une palette, le dégradé le plus sûr relie deux paliers voisins de la même échelle de couleur : il apporte de la profondeur sans s’annoncer. Une règle qui résiste au contact des interfaces réelles : si un visiteur décrirait votre page comme « celle avec le dégradé », le dégradé en fait trop.
Performance et emplacement de la déclaration
Un dégradé CSS est dessiné par le navigateur au lieu d’être téléchargé : il ne coûte aucune requête réseau et reste net à toute taille — un avantage réel sur une image de fond et une raison de le préférer pour de grands aplats. Deux précautions s’imposent. Animer un dégradé en modifiant ses arrêts de couleur force un repaint à chaque image et coûte cher ; animez plutôt `opacity` ou `transform` sur un calque portant le dégradé. Et sur un très grand élément, un dégradé à nombreux arrêts est plus coûteux à peindre qu’un dégradé à deux arrêts, ce qui compte sur les téléphones d’entrée de gamme où le temps de peinture est le goulot d’étranglement.
Erreurs courantes à éviter
- Juger un dégradé sur ses deux couleurs d’extrémité. Les extrémités paraissent presque toujours bonnes ; l’échec se situe au milieu, là où l’interpolation sRGB vide la saturation. Regardez l’aperçu, pas les échantillons.
- Accepter un milieu gris entre des teintes éloignées. Ajoutez un arrêt intermédiaire sur la teinte que la transition doit traverser — un seul arrêt sauve la plupart des dégradés délavés.
- Poser du texte sur un dégradé en ne testant qu’une extrémité. L’exigence de contraste vaut en chaque point traversé ; vérifiez l’extrémité claire et la sombre, et ajoutez un bandeau plein si l’une échoue.
- Employer un dégradé radial en fond de page entière. Il se lit comme un vignettage et non comme une surface ; le radial sert à une lueur derrière un élément central, le linéaire aux fonds.
- Animer les arrêts de couleur. Cela repeint le dégradé à chaque image — animez plutôt l’opacité ou une transformation sur un calque, que le navigateur compose à moindre coût.
Comparaison
| KeroTools | Outils de développement du navigateur | Logiciels de conception | |
|---|---|---|---|
| Aperçu en direct pendant l’édition | Oui | Oui, sur une page réelle | Oui |
| Sortie CSS prête à coller | Oui | Oui | Souvent approximative |
| Utilisable avant de développer | Oui | Non — exige une page rendue | Oui |
| Valeurs envoyées à un serveur | Jamais | Non | Non |
| Compte ou licence | Ni l’un ni l’autre | Ni l’un ni l’autre | Licence requise |
| Coût | Gratuit | Gratuit | Payant |
Fonctionnalités
Dégradés linéaires
N’importe quel angle en degrés, ou les directions par mot-clé qu’accepte le CSS.
Dégradés radiaux
Circulaires ou elliptiques, avec réglage de la position du centre.
Plusieurs arrêts de couleur
Insérez des couleurs intermédiaires et positionnez-les précisément le long de l’axe.
Aperçu en direct
Le dégradé se dessine à mesure que vous éditez : le milieu terne se voit avant la mise en ligne.
Sortie CSS valide
Une déclaration `background` complète, pas un fragment à reconstituer.
Saisie de couleurs HEX
Collez les codes directement depuis une charte ou une palette.
Aucune installation
Rien à télécharger ni à installer : tout se passe sur la page web.
Compatible arabe et RTL
Interface complète en huit langues, dont l’arabe de droite à gauche.
Sécurisé par défaut
Servi en HTTPS, sans suivi de fichiers ni envoi à un tiers.
Qui l’utilise
Développeurs front-end
Obtenir une déclaration de dégradé valide sans écrire à la main les angles et les positions d’arrêt.
Designers
Vérifier le rendu réel d’une transition entre deux couleurs avant qu’elle n’entre dans une maquette.
Toute personne qui thématise un gabarit
Produire un fond d’en-tête ou de bouton à partir de deux couleurs de marque déjà en main.
Personnes en apprentissage
Voir l’effet d’un changement d’angle ou de l’ajout d’un arrêt, plutôt que de deviner la syntaxe.
Questions Fréquentes
Non. Tout s’exécute localement dans votre navigateur — rien n’est envoyé, stocké ni partagé.
Oui — entièrement gratuit, sans compte et sans limite.