Générateur de dégradé CSS

Un générateur de dégradé CSS construit visuellement le code linear-gradient() / radial-gradient() : choisissez vos couleurs et votre direction, regardez l'aperçu en direct, copiez le CSS. La syntaxe qu'il écrit — background: Linear-gradient(135deg, #667eea 0%, #764ba2 100%) — est facile à lire mais fastidieuse à parcourir à la main ; la boucle visuelle fait que l'essai de dix variantes prend une minute.

Les dégradés gagnent leur omniprésence : ils ajoutent de la profondeur et du polissage pour un téléchargement d'image de zéro octet, s'adaptent à n'importe quelle taille sans perte et s'animent/s'adaptent d'une manière que les arrière-plans bitmap ne peuvent pas. Chaque section de héros, lueur de bouton et arrière-plan de carte au design moderne est constitué de quelques arrêts de dégradé.

Choisissez deux couleurs ou plus, définissez l'angle ou la direction, regardez la mise à jour de l'aperçu en direct et copiez le CSS prêt pour la production.

Élaborez des notes pour des dégradés qui semblent conçus plutôt que par défaut : les teintes voisines se mélangent proprement (bleu → violet, orange → rose) tandis que les opposés (rouge → vert) passent par un point médian gris boueux – passez par un troisième arrêt si vous devez traverser la roue ; des rythmes subtils et forts pour les arrière-plans (deux nuances de la même teinte se lisent comme de la profondeur, les arcs-en-ciel au néon se lisent comme 2010) ; et 135 degrés (de haut en bas à gauche) est la direction par défaut la plus flatteuse pour les surfaces de l'interface utilisateur.

Au-delà des arrière-plans : les dégradés remplissent le texte (via un clip d'arrière-plan), dessinent des bordures (bordure d'image ou enveloppes rembourrées) et teintent les photos à travers des calques de superposition. Le code copié fonctionne partout : la prise en charge est universelle dans les navigateurs modernes, aucun préfixe n'est nécessaire.