Mélangez vos propres dégradés CSS avec cette application Web gratuite

Chaque concepteur de sites Web doit connaître les dégradés CSS3 . Ils ont été autour depuis des années et ils sont largement pris en charge par tous les principaux navigateurs.

Et maintenant, des applications Web gratuites telles que Blend vous permettent de créer des dégradés CSS3 à la volée avec des éditeurs visuels dans le navigateur . Vous pouvez choisir entre des dégradés linéaires et radiaux tout en bricolant avec des couleurs à mélanger.

La page initiale est chargée avec deux couleurs unies de chaque côté. Vous pouvez utiliser la palette de couleurs pour basculer entre les teintes ou entrer un code HEX manuel si vous connaissez la couleur souhaitée. Une fois que vous avez deux couleurs que vous aimez, cliquez sur le bouton "Let's blend" au centre.

Les deux couleurs se fondent dans un dégradé CSS3 avec des options modifiables dans le haut de la page. Vous pouvez choisir entre les dégradés linéaires et les dégradés radiaux, et si vous utilisez le style linéaire, vous pouvez faire glisser l'emplacement central sur toute la page.

De plus, lorsque vous êtes en mode de fusion, vous pouvez toujours revenir en arrière pour changer les couleurs en bas. C'est comme le générateur de dégradé CSS3 sans code parfait dont chaque concepteur a besoin.

Une fois que vous avez deux couleurs que vous aimez, vous pouvez cliquer sur l' icône de support de code dans le coin en haut à droite. Cela ouvre une fenêtre avec du code CSS que vous pouvez copier / coller dans vos feuilles de style.

Blend est un outil gratuit créé par le designer new-yorkais Colin Keany. Il est également hébergé sur son site, même si je ne vois aucun lien vers GitHub ni aucun code source libre. Mais il a écrit une étude de cas détaillant son processus de création de Blend avec toutes ses fonctionnalités pratiques.

Malheureusement, la version actuelle ne supporte pas plus de deux couleurs . Mais je croise les doigts pour des options multicolores dans le futur.

Étant donné que vous ne pouvez pas télécharger une copie locale, je recommande d'associer un mélange pour une utilisation future. C'est le moyen idéal pour tester les dégradés sans modifier à plusieurs reprises votre feuille de style.

Et, si vous voulez partager vos idées ou simplement dire merci pour cet outil de dégradé, vous pouvez tweeter Colin @colinkeany.