Om detta verktyg
Vad är CSS Gradient Generator?
Bygg CSS-gradienter med en live-förhandsvisning. Välj typ (linjär, radiell, konisk), lägg till obegränsat antal färgstopp, ställ in vinkeln (eller positionen för radiella gradienter) och kopiera den genererade CSS:en. Resultatet fungerar i alla moderna webbläsare, och för äldre webbläsare inkluderar vi leverantörsprefixerade reservvärden.
Designers använder verktyget för hero-bakgrunder, knappstilar och utforskning av varumärkesstämningar. Exportera som CSS, Tailwind-klasser eller SVG.
FAQ · CSS GRADIENT GENERATOR
Frågor om CSS Gradient Generator
Vilka gradienttyper stöds?
Linjära (vanligast, vinkelbaserade), radiella (cirkulära eller elliptiska, med valbar position) och koniska (den nyaste typen, sveper färger runt en mittpunkt, bra för cirkeldiagramsliknande design). Allt exporteras som vanlig CSS.
Kan jag exportera till Tailwind?
Ja. Förutom den råa CSS:en skapar generatorn Tailwind-verktygsklasser (t.ex. `bg-gradient-to-br from-blue-500 via-purple-500 to-pink-500`) när färgstoppen råkar matcha Tailwinds namngivna färgpalett.
Är den gratis?
Ja. Ingen registrering krävs och den körs i webbläsaren.