CSS-gradientgenerator
Bygg CSS-gradienter visuellt: linjär, radiell eller konisk typ, vinkelreglage och upp till sex färgstopp med en direktuppdaterande fullbred förhandsvisning och kopieringsbar kod.
🔒 Bearbetas helt i din webbläsare – ingenting du anger här laddas någonsin upp.
Resultat
Att skriva linear-gradient(135deg, #2193b0 0%, #6dd5ed 100%) för hand och ladda om sidan för att se resultatet är en långsam loop. Den här generatorn sluter den: välj linjär, radiell eller konisk, dra i vinkelreglaget, ställ in varje färgstopp med en inbyggd färgväljare och en procentposition – och den fullbreda förhandsvisningen ritas om vid varje inmatning, med den färdiga bakgrundsraden alltid redo att kopieras.
De tre gradienttyperna täcker olika uppgifter. Linjära gradienter tonar längs en riktning och bär de flesta hero-sektioner och knappar; radiella gradienter strålar ut från mitten för glöd och vinjetteringar; koniska gradienter sveper runt mitten och driver cirkeldiagram och färghjul. Du kan byta typ när som helst – dina stopp följer med, så att jämföra de tre tar bara sekunder.
Upp till sex färgstopp ger dig utrymme för flerbandsdesigner, och de förinställda sidorna levererar beprövade kombinationer – en varm solnedgång, ett lugnt hav och ett mjukt pastellpar – som startpunkter du kan justera snarare än tomma dukar. Notera arbetsfördelningen: färgpalettgeneratorn på den här webbplatsen plockar harmoniska platta färger och färgformatskonverteraren översätter ett värde mellan HEX, RGB och HSL, medan det här verktyget gör en annan sak – det omvandlar valda färger till färdig CSS-gradientkod.
Allt körs lokalt i din webbläsare: ingen uppladdning, inget konto, inga serveranrop, och generatorn fungerar offline när den väl har laddats.