Gradientgenerator
Bygg linjära, radiella och koniska CSS-gradienter från grunden med dragbara flerstoppskontroller och utvalda förinställningar. Kopiera klar CSS direkt.
background: —;
Allt beräknas live i din webbläsare — ingen registrering, helt gratis.
Om Gradientgenerator
Gradientgeneratorn bygger anpassade CSS-gradienter från grunden. Välj en linjär, radiell eller konisk typ, ange vinkeln och forma övergången med en flerstoppsredigerare: dra handtag för att flytta stopp, klicka på balken för att lägga till nya, och färglägg om valfritt stopp med en väljare — förhandsvisningen i realtid uppdateras medan du arbetar.
Utvalda förinställningar ger dig en stark startpunkt när du inte vill börja från ett tomt blad, och åtgärder med ett klick — slumpa, vänd, rotera 45° — gör utforskandet snabbt. Den genererade CSS-koden är alltid synlig och håller sig synkroniserad med förhandsvisningen, så det du kopierar är exakt det du såg.
Allt beräknas i realtid i din webbläsare utan kostnad. Kopiera hela CSS-regeln eller bara bakgrundsvärdet och klistra in det i en stilmall, en knappstil eller en hero-sektion — en enkel CSS-gradientgenerator för bakgrunder, överlägg och gränssnittsaccenter.
Så använder du Gradientgenerator
- Välj en gradienttyp: linjär, radiell eller konisk.
- Starta från en förinställning eller klicka på "Slumpmässig" för en direkt startpunkt.
- Dra i stopphandtagen för att positionera färger, klicka på balken för att lägga till stopp, och redigera varje stopps färg.
- Justera vinkeln, eller använd "Vänd" och "Rotera 45°" för att omorientera blandningen.
- Kopiera CSS-regeln eller bakgrundsvärdet och klistra in det i ditt projekt.