CodeKitHubVad är detta verktyg?
CSS-gradienter är bilder genererade av webbläsaren från en lista med färger, snarare än filer du laddar upp — linear-gradient() övergår färger längs en rak linje i en given vinkel, medan radial-gradient() övergår färger utåt från en centerpunkt. Båda accepterar två eller fler färgstopp, var och en valfritt fäst vid en position längs gradienten.
Handskrivna är gradienter lätta att få subtilt fel: stoppordning, saknade procentsatser, eller ett vinkelvärde i fel riktning (CSS-vinklar löper medurs från "to top", till skillnad från matematiska vinklar). Det här verktyget håller syntaxen ur vägen — ställ in färger och positioner med väljare och reglage, se förhandsvisningsrutan uppdateras i realtid, och kopiera resulterande CSS när den ser rätt ut.
Källa: CSS Images Module Level 3, W3C — specifikationen som definierar linear-gradient()- och radial-gradient()-syntax.
Varför använda det?
- Förhandsvisning live uppdateras direkt vid varje ändring av färg, position och vinkel — inget behov av att ladda om en sida för att se resultatet.
- Växla mellan linjära och radiella gradienter med ett klick; vinkelkontrollen döljs automatiskt för radiella gradienter, där den inte gäller.
- Lägg till eller ta bort färgstopp (2 till 4) istället för att begränsas till en fast tvåfärgad gradient.
- Varje stopp har sitt eget positionsreglage, så stoppen behöver inte vara jämnt fördelade.
- Ger färdig-att-klistra-in CSS med standardsyntaxen linear-gradient()/radial-gradient().
- Körs helt i din webbläsare — inget du konfigurerar laddas upp någonstans. Gratis, ingen registrering, fungerar på mobilen.
Så använder du det
- Välj Linjär eller Radiell som gradienttyp.
- För en linjär gradient, dra vinkelreglaget — 90 grader går från vänster till höger, 180 grader går uppifrån och ner, och så vidare.
- Ställ in färg och position för varje stopp; det första stoppet är gradientens startfärg, det sista dess slutfärg.
- Klicka på "+ Lägg till stopp" för att lägga till upp till 4 stopp totalt för en flerfärgad gradient, eller ✕-knappen för att ta bort ett (minimum 2).
- Kopiera den genererade CSS:en och klistra in den i en background- eller background-image-deklaration.
Exempel
Inmatning
Linjär · Vinkel: 90 grader · Stopp: #f97316 vid 0 %, #ec4899 vid 100 %Resultat
background: linear-gradient(90deg, #f97316 0%, #ec4899 100%);En vänster-till-höger orange-till-rosa-gradient — en vanlig stil för knappar, banners och hero-bakgrunder.
Linjär kontra radiell gradient
En linjär gradient övergår färg längs en rak linje, styrd av en vinkel — användbart för banners, knappar och riktade bakgrunder. En radiell gradient övergår färg utåt från en centerpunkt i expanderande ringar, vilket passar strålkastareffekter, emblem eller glow-liknande bakgrunder. Det här verktyget använder som standard en cirkelform centrerad i rutan för den radiella gradienten, vilket täcker det vanligaste radiella användningsfallet; CSS stöder även ellipsformer och positioner utanför mitten om du vill handredigera utdatan vidare.
Vanliga gradientmönster
- Subtil varumärkesaccent: två nära nyanser (t.ex. två toner av samma färg) i en flack vinkel för en mjuk bakgrundston.
- Högkontrastknapp för call-to-action: två mättade, kompletterande färger vid 90 eller 135 grader för ett djärvt, klickbart utseende.
- Överlägg på en bild: en gradient från transparent till en solid färg (ställ in opacitet via en rgba-färg i väljarens underliggande hex, eller justera efter kopiering) lagd över en background-image.
- Flerstopps regnbågs-/varumärkesgradient: 3–4 stopp fördelade över hela 0–100 %-intervallet för mjukare, mer gradvisa övergångar än vad en tvåfärgad gradient tillåter.
- Radiell strålkastare: ett ljust centerstopp nära 0 % som tonar ut till ett mörkare kantstopp nära 100 %, användbart för hero-sektioner eller kortlyft.
Kombinera med andra CSS-verktyg
Gradienter kombineras ofta med rundade hörn och skuggor på samma element — ett gradientkort med en mjuk box-shadow och rundade hörn är ett vanligt UI-mönster. Generera varje del separat och kombinera CSS-deklarationerna på elementet.
→ Box Shadow-generator · Border Radius-generator · Färgväljare
Vanliga frågor
Vad är skillnaden mellan linear-gradient() och radial-gradient()?
linear-gradient() övergår färger längs en rak linje vid en angiven vinkel. radial-gradient() övergår färger utåt från en centerpunkt i expanderande former (cirkel eller ellips). Båda accepterar samma typ av kommaseparerad färgstoppslista; bara övergångens form skiljer sig.
Hur fungerar CSS-gradientvinklar?
CSS-gradientvinklar löper medurs med start från "to top" (0 grader pekar uppåt). 90 grader pekar höger, 180 grader pekar nedåt och 270 grader pekar vänster — motsatt konvention mot vanliga matematiska vinklar, vilket är en vanlig källa till förvirring vid handskrivna gradienter.
Kan jag använda fler än 4 färgstopp?
Ja — CSS-gradienter accepterar valfritt antal kommaseparerade färgstopp. Det här verktyget begränsar den interaktiva byggaren till 4 för ett hanterbart gränssnitt, men du kan kopiera den genererade CSS:en och manuellt lägga till fler kommaseparerade "färg position%"-poster i din stilmall.
Varför ser min gradient bandad ut istället för smidig?
Bandning beror oftast på färger som ligger för långt ifrån varandra i nyans med för få stopp mellan sig, eller på webbläsarens egen begränsade färgprecision vid mycket låg kontrast. Att lägga till ett mellanliggande stopp med en blandad färg, eller välja färger närmare varandra i nyans, ger vanligtvis ett jämnare resultat.
Kan jag animera en CSS-gradient?
Inte direkt — gradienter är inte inbyggt animerbara på samma sätt som background-position eller transform, eftersom webbläsare inte kan interpolera mellan två godtyckliga gradientdefinitioner. Vanliga lösningar inkluderar att animera background-position på en överdimensionerad gradient, eller att göra en övergång på background-color om bara en enda färg ändras.