Bland dine egne CSS-gradienter med denne gratis webapps

Hver webdesigner bør vite om CSS3 gradienter. De har eksistert i årevis, og de er mye støttet av alle de store nettleserne.

Og nå, gratis webapper som Blanding la deg lage CSS3-gradienter i fly med visuelle redigeringsprogrammer i nettleseren. Du kan velge mellom lineære og radiale gradienter mens tinkering med farger å blande.

Den første siden lastes med to solide farger på begge sider. Du kan bruke farge palett å bla mellom nyanser eller angi a manuell HEX-kode hvis du vet hvilken farge du vil ha. Når du har to farger du liker, klikker du på “La oss blande” knapp i midten.

Begge farger smelter sammen til en CSS3 gradient med redigerbare alternativer nær toppen av siden. Du kan velge mellom lineære gradienter & radiale gradienter, og hvis du bruker den lineære stilen du kan dra midtpunktet over hele siden.

Pluss, mens du er i blandemodus Du kan fortsatt gå tilbake til endre fargene på bunnen. Dette er som den perfekte kodefrie CSS3-gradientgeneratoren som alle designere trenger.

Når du har to farger du liker, kan du klikke på kodebrakettikon i øverste høyre hjørne. Dette bringer opp en vindu med CSS kode at du kan kopiere / lime inn i stilarkene dine.

Blend er et gratis verktøy laget av NYC designer Colin Keany. Det er også vert på hans nettsted, selv om jeg ikke ser en kobling til GitHub eller en hvilken som helst kildekode hvor som helst. Men han skrev en casestudie detaljere sin prosess å skape Blend med alle sine praktiske funksjoner.

Dessverre, den nåværende versjonen støtter ikke mer enn to farger. Men jeg krysser fingrene mine for flere farger i fremtiden.

Siden du ikke kan laste ned en lokal kopi, anbefaler jeg at bokmerkeblanding brukes til fremtidig bruk. Det er den perfekte måten å testgradienter uten å redigere stilarket ditt flere ganger.

Og hvis du vil dele ideene dine eller bare si takk for dette gradientverktøyet, kan du tweet Colin @colinkeany.