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

Tout concepteur de sites Web devrait connaître Dégradés CSS3. Ils existent depuis des années et sont largement supportés par tous les principaux navigateurs..

Et maintenant, des applications Web gratuites telles que Mélange vous permet de créer des dégradés CSS3 à la volée avec éditeurs visuels dans le navigateur. Vous pouvez choisir entre gradients linéaires et radiaux en bricolant avec des couleurs pour se fondre.

La page initiale se charge avec deux couleurs unies de chaque côté. Vous pouvez utiliser le palette de couleurs pour basculer entre les teintes ou entrer un code HEX manuel si vous connaissez la couleur que vous voulez Une fois que vous avez deux couleurs que vous aimez, cliquez sur le bouton “Mélangeons” bouton dans le centre.

Les deux couleurs se mélangent dans un dégradé CSS3 avec options modifiables près du haut de la page. Vous pouvez choisir entre gradients linéaires Et gradients radiaux, et si vous utilisez le style linéaire, vous pouvez faites glisser l'emplacement du centre tout au long de la page.

De plus, pendant que vous êtes en mode mélange vous pouvez toujours revenir à changer les couleurs au fond. Cela ressemble au générateur de dégradé CSS3 sans code dont chaque concepteur a besoin.

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

Blend est un outil gratuit créé par le designer de New York, Colin Keany. C'est aussi hébergé sur son site, bien que je ne vois pas de lien vers GitHub ni de code source gratuit où que ce soit. Mais il a écrit une étude de cas détaillant son processus créant 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 à l'avenir.

Étant donné que vous ne pouvez pas télécharger une copie locale, je vous recommande de mettre Blend en favori pour une utilisation ultérieure. C'est le moyen idéal pour gradients de test sans éditer à 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.