Pourquoi cet outil ? Créer visuellement un dégradé CSS linéaire ou radial, avec jusqu'à trois couleurs, sans deviner les codes couleurs et l'angle, puis copier directement le code prêt à coller.
Guide pratique
Créer un dégradé CSS à la main implique de connaître la syntaxe exacte de linear-gradient, de choisir un angle cohérent, et de visualiser mentalement le résultat avant de le voir s'afficher - ce qui prend du temps par essais-erreurs dans l'éditeur de code.
Avec cet outil, choisir par exemple un dégradé allant du violet #8B5CF6 au rose #EC4899 avec un angle de 135 degrés génère immédiatement le code background: linear-gradient(135deg, #8B5CF6, #EC4899); et affiche l'aperçu visuel correspondant en temps réel, ce qui permet d'ajuster les couleurs ou l'angle jusqu'à obtenir exactement l'effet recherché avant de copier le code final.
- Pour un designer qui veut prototyper rapidement un fond de section ou un bouton sans ouvrir son éditeur de code.
- Pour un développeur qui a une idée de deux couleurs mais hésite sur l'angle ou la direction du dégradé.
- Pour tester plusieurs combinaisons de couleurs côte à côte avant de choisir celle qui correspond le mieux à une charte graphique.
Comme l'aperçu est immédiat, il devient facile de comparer plusieurs variantes (angle à 45°, 90°, 180°) pour voir laquelle structure le mieux une mise en page donnée.
Questions fréquentes
Le dégradé fonctionne-t-il dans tous les navigateurs ?
Oui, `linear-gradient` est supporté par tous les navigateurs modernes depuis de nombreuses années, sans préfixe nécessaire.
Puis-je utiliser plus de deux couleurs dans un dégradé CSS ?
Oui, la propriété CSS l'autorise nativement en ajoutant d'autres couleurs séparées par des virgules, mais cet outil se limite à deux couleurs pour rester simple.
Cet outil fait partie de Quiko, une collection de 101 générateurs gratuits.