CSS-gradientgenerator

Denna CSS-gradientgenerator bygger linjära och radiella gradienter från färgstopp som du kontrollerar, med en liveförhandsvisning och en bakgrundsdeklaration som är klar att klistra in. Dra stoppen längs fältet, ställ in vinkeln eller formen och CSS uppdateras omedelbart.

Allt körs i din webbläsare från de färger och inställningar du väljer, så ingenting laddas upp och du kan kopiera resultatet och använda det offline.

En linjär gradient blandar färger längs en rät linje, och vinkeln anger dess riktning: 0 grader pekar uppåt, 90 grader pekar åt höger, 180 grader pekar nedåt. En radiell gradient smälter utåt från mitten, som en cirkel eller en ellips.

Båda är standard CSS-värden, skrivna som linear-gradient() och radial-gradient(), och båda använder samma lista med färgstopp, så att byta typ behåller dina färger och ändrar bara hur de sprids.

Varje färgstopp är en färg placerad i en position från 0 % till 100 %. Gradienten blandas smidigt mellan närliggande hållplatser, så ett stopps position styr var dess färg toppar och hur snabbt det tonar in i nästa.

Lägg till så många stopp som du behöver för att bygga flerfärgsgradienter, dra dem för att finjustera blandningen eller klicka på fältet för att släppa ett nytt stopp där du vill ha det. Två stopp är det minsta en gradient behöver.

Kopiera den genererade koden och klistra in den som bakgrund för ett element, till exempel ett avsnitt, kort eller knapp. Moderna webbläsare stöder linjär gradient och radiell gradient utan leverantörsprefix, så värdet fungerar som det är.

Eftersom en gradient bara är ett värde kan du också använda den var som helst där en bakgrundsbild förväntas, lägga den över en enfärgad som en reserv, eller återanvända samma stopp över en linjär och radiell version för ett konsekvent utseende.