Vi tar en titt på tio av de bästa CSS-gradientgeneratorerna som du kan använda för att skapa olika gradientstilar (och få CSS-utdata direkt!). Kodning av en gradient för hand är inte kul (speciellt när du kommer över en enkel tvåfärggradient), så dessa verktyg är ett måste i din bokmärkesmapp.
Ett av de trendigaste elementen i webbdesign gör att en bakgrundsgrad eller färgöverlagring används. En tvåfärgad linjär gradient är den mest populära variationen i denna trend. Och medan gradienter kan se snygg och komplicerat, är de faktiskt ganska lätta att skapa och distribuera? om du använder rätt verktyg!
CoolHue
CoolHue är en imponerande samling av färdiga kombinationer. Från pinks och apelsiner till blues och greener finns allt från gradienter med slående kontrast till mjuka förändringar.
Medan du inte har mycket kontroll över att anpassa alternativen med CoolHue, kommer du direkt veta om en av färgkombinationerna fungerar för dig eftersom alla alternativ är rätt på skärmen.
Och med ett klick kan du kopiera CSS. (Det är det. Allvarligt!) Om du vill ha en nedladdning är varje fil också tillgänglig som en PNG.
CSS Gradient
CSS Gradient har gott om växlar och numeriska alternativ så att du kan hämta upp till tre färger och skapa en anpassad CSS-gradient.
Växlarna är lätta att använda och även någon med mycket liten färgupplevelse kan räkna ut hur man skapar en användbar lutning. Dessutom finns det några startgradienter i flera olika stilar för inspiration.
En av de bästa funktionerna i det här verktyget kan vara den höga kontrollen du har över varje detalj i den gradient du skapar. Koden genereras nedan på skärmen så att du kan se allt när du arbetar.
UI-gradienter
Varje gradient inkluderar ett-klick för att kopiera CSS eller en nedladdningsbar jpg. UI Gradients är en helskärmsgradientgenerator. Fördelen med att se färgvariationerna i full storlek är att du verkligen kan visualisera hur de kommer att se ut med dina faktiska designprojekt.
UI-gradienter innehåller många förberedda gradientalternativ. Bläddra bland samlingen eller söka efter färg. Valet varierar från två till tre färger med linjära mönster.
Gillar du inte vad du ser? Användare kan också lägga till gradientdetaljer till filen gradients.json i projektets repo och lämna in en begäran om dragning.
CSSmatic
CSSmatic är en enkel gradientgenerator med snabbtangenter för att hjälpa dig att anpassa färgval, stopp och rotation. Användare kan skapa linjära eller radiella gradienter.
Börja med en av de enkla förinställningarna - det finns några fina monokromatiska alternativ här - och tweak tills du bara får rätt gradient. Kopiera sedan koden och du är redo att gå.
Ultimate CSS Gradient Generator
Ultimata CSS Gradient Generator ser mycket ut som CSSmatic, och funktionerna på skärmen är likartade, men det har också någon annan funktion.
Verktyget innehåller ett kompatibilitetsschema för webbläsare, flera färgformat, förmåga att importera en gradientbild och innehåller mer än 135 anpassade förinställningar. Användare kan också importera gradienter från befintlig CSS och göra justeringar. (Det här kan vara ett bra alternativ för att tweaking en gradient på din webbplats som bara inte ser riktigt ut som du vill.)
Färg rymd
Eeach CSS-gradienten kommer med en unik URL som du kan dela med gruppmedlemmar när du arbetar genom färgalternativ. ColorSpace är ett annat helskärmsgradientverktyg med en mycket visuell webbplats.
Det är lätt att använda. Välj en orientering (linjär eller radiell) för din gradient, lägg till två färger med knapparna och färgväljaren och klicka sedan på generera.
Medan det här verktyget fortfarande är i beta fungerar det bra. Och koden är rätt på skärmen för att du ska kopiera till projekt. Allt du behöver från gradienten visuellt till CSS är precis på skärmen. Och om du inte gillar dina färgval är det lätt att ändra och klicka på generera igen.
CSS Gradient Generator
CSS Gradient Generator producerar kod med ett enkelt grafiskt användargränssnitt. CSS kommer att fungera i alla webbläsare som stöder CSS3.
Generatorn låter dig skapa linjära och radiella gradienter, plus har förmågan att importera befintlig CSS-gradientkod för att redigera. Det kommer också med några förinställningar för att hoppa över dina gradientvisualiseringar.
CSS3 Factory
CSS3 Factory är ett enkelt verktyg som fungerar bäst om du vet vilka färger du vill använda för en CSS-gradient.
Med det här valet kan du inte lägga in färgval, ställa in en riktning för färgerna och kopieringskoden. Det finns ett litet förhandsgranskningsfönster för att se hur gradienter kommer att se ut, men det här verktyget innehåller inga förinställningar.
CSS-Gradient
CSS-Gradient är en generator plus gradient handledning allt-i-ett.
Verktyget innehåller lådor för att välja två färgval i hex eller RGB, riktnings- och linjära eller radiala alternativ. (Så det här verktyget är förmodligen bäst om du har en uppfattning om vilka färger du vill använda.)
Kopiera koden och tillämpa den på din design.
Men vad som är bra om det här verktyget är att det finns massor av användbar information under rullningen för användare om gradienter, hur CSS-gradienter fungerar och skillnader mellan linjära och radiella alternativ. Alla dessa resurser är särskilt trevliga för nybörjare.
GradientGenerator
GradientGenerator är ett utmärkt verktyg för att gnista lite gradientinspiration. Börja med en av förinställningarna - det finns gott om olika alternativ att välja mellan - och lägg sedan till egna anpassningar för en unik gradient.
Det här verktyget är fyllt med anpassningar och innehåller även enkla, avancerade och expertinställningar att välja utifrån din kompetensnivå och färgmatchningsförmåga.
Du kan klicka för att kopiera CSS, ladda ner en PNG, snag en QR-kod för att testa på din mobila enhet eller skapa en dellänk. Det här verktyget har också andra ganska avancerade konfigurationsalternativ som du kan spela med, inklusive typen av kod som genereras.
Slutsats
En av de största fördelarna med att använda en CSS-gradientgenerator är att de flesta av verktygen visar dig hur gradienten kommer att se ut på skärmen medan du genererar motsvarande kod. Du kan visuellt tweak färger, överlappningar, riktning, opacitet och mer direkt på skärmen.
Då behöver du bara kopiera koden och klistra in den i din CSS-fil för att komma igång. En CSS-gradientgenerator är ett snabbt och enkelt sätt att skapa en webbplatsgradient som du kommer att älska och det är lätt att använda. Vi hoppas att ett av alternativen i den här listan fungerar bra för dig.