uiGradients : une collection open-source de dégradés pour designers et développeurs 80

uiGradients est une collection open source de dégradés destinée aux designers et développeurs, proposant de nombreux dégradés linéaires et radiaux prêts à l'emploi. Vous pouvez les consulter en ligne, copier le code CSS et y accéder via gradients.json dans votre code. Ils s'intègrent rapidement dans vos pages web, applications ou designs graphiques.

Caractéristiques principales de uiGradients

• Facile à utiliser : choisissez le dégradé qui vous plaît et cliquez en haut à droite pour copier le code ou télécharger l'image.

• Prise en charge de plusieurs formats : génère du CSS, SCSS, LESS, Stylus, Swift, Android XML, etc., utilisables directement par différentes technologies.

• Maintenu par la communauté : tous les dégradés sont stockés dans le fichier gradients.json du dépôt GitHub ; tout le monde peut le forker et ajouter de nouvelles couleurs, qui seront mises en ligne une fois la PR acceptée.

• De nombreux projets associés : il existe déjà des extensions iOS, des composants React, une version SCSS, des helpers Handlebars, etc., pour une intégration rapide dans divers projets.

• Gratuit et open source : sous licence MIT, utilisable commercialement et modifiable, à condition de conserver la mention de copyright de l'auteur original.

Cas d'utilisation de uiGradients

• Pour les arrière-plans, boutons, barres de navigation, cartes et autres zones importantes de sites web ou d'applications ;

• Pour trouver la couleur principale ou les couleurs secondaires d'une marque et tester rapidement les associations de couleurs ;

• Pour remplir des dégradés dans des designs graphiques comme des diapositives, affiches ou visuels pour les réseaux sociaux ;

• Comme référence pour apprendre la théorie des couleurs et découvrir les dégradés tendance du moment.

Comment utiliser uiGradients (exemple Web)

1. Ouvrez le site officiel de uiGradients, cliquez sur n'importe quel dégradé dans la liste de gauche, l'aperçu s'affiche instantanément à droite.

2. Sélectionnez « Copy CSS » en haut à droite pour obtenir un code similaire :

background: linear-gradient(to right, #ff416c, #ff4b2b);

3. Collez-le dans votre feuille de style ou dans un style en ligne, enregistrez et actualisez pour voir le résultat.

Astuces pour uiGradients

• Pour trouver l'inspiration au hasard, ajoutez #random à la fin de l'URL pour accéder à un dégradé aléatoire.

• Compatible avec les smartphones et tablettes : la page s'adapte à la taille de l'écran, il suffit de le sélectionner et de copier le code.

• Utilisez-le avec d'autres outils de配色 comme Color Hunt ou Mesh Gradients pour créer des associations de couleurs plus complexes.