CSS-gradientgenerator
Skapa vackra CSS-gradienter med förhandsgranskning
Gradientinställningar
Färgstopp
Färgstopp 1
Färgstopp 2
Färdiga gradienter
Gradienttips
Använd linjära gradienter för mjuka färgövergångar i en riktning.
Radiella gradienter fungerar bra för strålkastar- eller fokuseffekter.
Koniska gradienter passar perfekt för färghjul och vinkelmönster.
Justera färgstoppens positioner för att styra hur gradientens färger fördelas.
Använd färger med liknande nyans för subtila gradienter eller kontrasterande färger för kraftiga effekter.
Liveförhandsvisning
CSS-kortform
background: linear-gradient(to right, #3B82F6 0%, #8B5CF6 100%);CSS-egenskap
background-image: linear-gradient(to right, #3B82F6 0%, #8B5CF6 100%);CSS-klass
.gradient-bg {
background: linear-gradient(to right, #3B82F6 0%, #8B5CF6 100%);
}Justera färger och positioner. Förhandsvisningen uppdateras medan du arbetar.
Om CSS-gradientgenerator
Vår kostnadsfria CSS-gradientgenerator gör det enkelt att skapa vackra, mjuka färgövergångar för alla webbprojekt. Bygg linjära gradienter, radiella gradienter och koniska gradienter med full kontroll över färger, positioner, riktningar och vinklar, allt med en visuell förhandsvisning i realtid.
Oavsett om du behöver en diskret tvåfärgad bakgrund eller en komplex gradient med flera färgstopp ger verktyget dig upp till 10 färgstopp med exakt positionskontroll. Välj bland färdiga mallar som Solnedgång, Hav, Skog och Lila regn, eller använd slumpgeneratorn för att hitta unika färgkombinationer för gradienter till dina designer.
Generatorn skapar direkt ren CSS-kod för gradienter som du kan kopiera med ett klick eller ladda ned som PNG-bild. Flera utdataformat finns, bland annat background-förkortning, egenskapen background-image och en färdig CSS-klass. All bearbetning sker i din webbläsare, utan att något laddas upp till en server.
Viktiga funktioner
- Stöd för linjära, radiella och koniska gradienter med full anpassning
- Upp till 10 färgstopp med individuell positionskontroll för exakt gradientdesign
- 8 riktningsmallar för linjära gradienter samt egen vinkelinmatning
- Reglage för radiell gradients form (cirkel/ellips) och position
- Konisk gradient med justerbar startvinkel för färghjulseffekter
- 4 inbyggda färdiga gradienter: Solnedgång, Hav, Skog och Lila regn
- Slumpgenerator för gradienter för kreativ inspiration och utforskande
- Förhandsvisning i realtid som uppdateras direkt när du ändrar inställningarna
- Kopiering med ett klick och flera CSS-utdataformat (förkortning, egenskap, klass)
- Ladda ned gradienten som PNG-bild i hög upplösning (800x600)
Så använder du CSS-gradientgeneratorn
- Välj gradienttyp: Välj Linjär, Radiell eller Konisk i typväljaren för att bestämma gradientens stil.
- Ställ in riktning eller position: För linjära gradienter väljer du en riktning eller en egen vinkel. För radiella väljer du form och position. För koniska justerar du startvinkeln.
- Lägg till och justera färger: Använd färgväljarna för att ange gradientens färger och dra i positionsvärdena för att styra var varje färg visas.
- Förhandsgranska i realtid: Se förhandsvisningen av gradienten uppdateras direkt när du ändrar färger, positioner och inställningar.
- Kopiera CSS-koden: Klicka på knappen Kopiera för att kopiera CSS-syntaxen för gradienten till urklipp i det format du föredrar.
- Ladda ned som bild: Klicka på Ladda ned för att spara gradienten som PNG-bild som du kan använda i designverktyg eller presentationer.
Användningsområden
- Webbplatsbakgrunder: Skapa iögonfallande hero-sektioner, sidhuvuden och bakgrunder för hela sidor med mjuka färgövergångar.
- Formgivning av knappar: Designa gradientknappar som sticker ut och leder användare mot uppmaningar till handling.
- Accenter på kort och komponenter: Lägg till gradientkanter, överlägg eller accentfärger på kort och komponenter i gränssnittet.
- Texteffekter: Använd CSS-gradienter med background-clip för att skapa färgglada gradienttexteffekter.
- Laddningsindikatorer: Bygg animerade gradientbakgrunder för skelettskärmar och laddningstillstånd.
- Grafik för sociala medier: Ladda ned gradientbilder för inlägg, stories och omslagsbilder i sociala medier.
- Färger i designsystem: Skapa enhetliga gradienttokens för ditt varumärkes formspråk.
- Presentationsbilder: Skapa gradientbakgrunder för webbaserade presentationer och portföljer.
Vanliga frågor
Är verktyget gratis?
Ja, CSS-gradientgeneratorn är helt gratis. Det finns inga användningsgränser, inga vattenstämplar på nedladdningar och ingen kontoregistrering krävs.
Är mina data säkra?
All gradientgenerering och bildrendering sker direkt i din webbläsare. Inga färgdata, CSS-kod eller bilder laddas upp till någon server, så ditt arbete förblir helt privat.
Vad är skillnaden mellan linjära, radiella och koniska gradienter?
Linjära gradienter går över i varandra längs en rak linje i en given riktning. Radiella gradienter utgår från en mittpunkt och sprider sig utåt i en cirkulär eller elliptisk form. Koniska gradienter sveper färgerna runt en mittpunkt som ett färghjul.
Hur många färger kan jag använda i en gradient?
Du kan använda mellan 2 och 10 färgstopp i en och samma gradient. Varje stopp har en egen färgväljare och ett eget positionsreglage för exakt kontroll över övergången.
Stöds CSS-gradienter i alla webbläsare?
Linjära och radiella gradienter stöds i alla moderna webbläsare. Koniska gradienter stöds också brett i aktuella versioner av Chrome, Firefox, Safari och Edge.
Tips och bästa praxis
- Använd liknande nyanser för diskreta effekter: Färger som ligger nära varandra på färghjulet ger mjuka, eleganta gradienter som känns naturliga.
- Begränsa antalet färgstopp: Två till tre färger ger oftast de renaste resultaten. Fler stopp kan ge smutsiga övergångar om de inte placeras noggrant.
- Ange en reservfärg: Ta alltid med en enfärgad background-color före gradientdeklarationen för webbläsare som kanske inte kan visa den.
- Testa radiell för strålkastareffekter: Radiella gradienter fungerar bra för att dra uppmärksamhet till mitten av en sektion eller framhäva ett fokusområde.
- Testa på flera skärmar: Gradienter kan se olika ut på olika skärmar och mobila enheter, så förhandsgranska alltid på flera enheter.
- Använd slumpgeneratorn: Klicka på Slumpa för att hitta oväntade färgkombinationer som du kanske inte har tänkt på.