Blanda dina egna CSS-gradienter med denna gratis webbapp

Varje webbdesigner borde veta om CSS3 gradienter. De har funnits i många år och de stöds allmänt av alla större webbläsare.

Och nu, gratis webbapps som Blandning låt dig skapa CSS3-gradienter i fluga med in-browser visuella redaktörer. Du kan välja mellan linjära och radiella gradienter medan tinkering med färger för att blanda.

Den första sidan laddas med två solida färger på vardera sida. Du kan använda färgpalett att vända mellan nyanser eller ange a manuell HEX-kod om du vet vilken färg du vill ha. När du har två färger du gillar, klicka på “Låt oss blanda” knapp i mitten.

Båda färgerna blandas i en CSS3-gradient med redigerbara alternativ nära toppen av sidan. Du kan välja mellan linjära gradienter & radiella gradienter, och om du använder den linjära stilen du kan dra mittplatsen över hela sidan.

Plus, medan du är i blandningsläge du kan fortfarande gå tillbaka till ändra färgerna på botten. Det här är som den perfekta kodfria CSS3-gradientgenerator som varje designer behöver.

När du har två färger du gillar kan du klicka på kodfästeikon i det övre högra hörnet. Detta ger upphov till en fönster med CSS-kod att du kan kopiera / klistra in i stilarken.

Blend är ett gratis verktyg skapat av NYC Designer Colin Keany. Det är också värd på sin webbplats, även om jag inte ser en länk till GitHub eller någon fri källkod någonstans. Men han skrev en fallstudie specificera sin process skapa Blend med alla dess praktiska funktioner.

Tyvärr, den nuvarande versionen Stödjer inte mer än två färger. Men jag korsar mina fingrar för flerfärgsmöjligheter i framtiden.

Eftersom du inte kan ladda ner en lokal kopia, rekommenderar jag bokmärkesblandning för framtida bruk. Det är det perfekta sättet att provgradienter utan att upprepade gånger redigera ditt stilark.

Och om du vill dela med dig av dina idéer eller bara tacka för det här lutningsverktyget kan du tweet Colin @colinkeany.