CSS-gradientgenerator
Bygg en gradient visuellt och kopiera CSS-koden.
- Körs i din webbläsare — din text skickas aldrig någonstans
- Ingen registrering, inga kvoter, gratis att använda så ofta du vill
Så fungerar det
Gradienter skrivs i CSS som en enda deklaration vars syntax är lätt att minnas fel, särskilt vinkelkonventionen och var färgstoppen placeras. Att se resultatet medan du justerar är snabbare än att ladda om en sida för att kontrollera.
Vinkelkonventionen överraskar folk
I CSS pekar 0 grader uppåt och vinkeln ökar medurs, så 90 grader går från vänster till höger och 180 grader går uppifrån och ned. Det skiljer sig från den matematiska konventionen och från flera designverktyg, vilket är varför en gradient som kopierats från annat håll ofta kommer ut roterad.
De tre typerna
Linjär går längs en rät linje och täcker nästan alla verkliga användningar. Radiell sprider sig utåt från en punkt, vilket passar sken och strålkastare. Konisk svepar runt en mittpunkt och är vad cirkeldiagram och färghjul byggs av.
En gradient är en bild, inte en färg
Det här är det andra som får folk att snubbla. CSS behandlar en gradient som en bakgrundsbild, så den fungerar i background och background-image men inte i color, border-color eller något annat som förväntar sig en vanlig färg. Textgradienter behöver background-clip, vilket är en separat teknik.
Att lägga till en mellanfärg
Två stopp ger en ren övertoning. Ett tredje låter dig leda övergången via en annan nyans, vilket undviker det grumliga grå som uppstår när två motsatta färger blandas direkt.
CSS-gradientgenerator — frågor
Åt vilket håll går vinkeln?
0 grader pekar uppåt och vinklar ökar medurs, så 90 grader går från vänster till höger.
Varför fungerar inte min gradient på text?
En gradient är en bakgrundsbild, inte en färg. Textgradienter behöver background-clip som ett separat steg.
När ska jag använda radiell eller konisk?
Radiell för sken och strålkastare, konisk för cirkeldiagram och färghjulseffekter. Linjär täcker de flesta andra fall.