CSS Gradient Generator
Bygg CSS-gradienter visuellt: linjär, radiell eller konisk typ, vinkelreglage och upp till sex färgstopp med en liveförhandsvisning i full bredd och kopierbar kod.
Resultat
Skriver linjär-gradient (135deg, #2193b0 0%, #6dd5ed 100%) för hand och laddar om sidan för att se att det är en långsam loop. Den här generatorn stänger den: välj linjär, radiell eller konisk, dra vinkelreglaget, ställ in varje färgstopp med en inbyggd färgväljare och en procentposition – och förhandsgranskningen i full bredd målas om på varje enskild ingång, med den färdiga bakgrundslinjen alltid redo att kopieras.
De tre gradienttyperna täcker olika jobb. Linjära gradienter bleknar längs en riktning och bär de flesta hjältesektioner och knappar; radiella gradienter strålar ut från mitten för glöd och vinjetter; koniska gradienter sveper runt mitten och kraftcirkeldiagrammen och färghjulen. Du kan byta typ när som helst - dina stopp går över, så att jämföra de tre tar sekunder.
Upp till sex färgstopp ger dig utrymme för flerbandsdesign, och de förinställda sidorna levererar beprövade kombinationer - en varm solnedgång, ett lugnt hav och ett mjukt pastellpar - som utgångspunkter du kan finjustera snarare än tomma dukar. Notera arbetsfördelningen: färgpalettgeneratorn på den här webbplatsen väljer harmoniska platta färger och färgformatomvandlaren översätter ett värde mellan HEX, RGB och HSL, medan det här verktyget gör ett annat jobb - det omvandlar valda färger till färdig CSS-gradientkod.
Allt körs lokalt i din webbläsare: ingen uppladdning, inget konto, inga server-rundturer och generatorn fortsätter att fungera offline när den har laddats.