Viktiga punkter
- 01Alla tre CSS-gradienttyper — linjär, radiell och konisk — stöds med live preview.
- 02Lägg till upp till sex färgstopp, var och en med oberoende position och färg.
- 03Utmatningen är en komplett background-deklaration redo att klistras in i vilken stylesheet som helst.
- 04Ingen registrering, ingen installation, och ingenting uppladdat — allt körs i din webbläsare.
Varför använda en visuell gradientgenerator?
Att skriva CSS-gradienter för hand blir tråkigt snabbt. Syntaxen är läslig när du väl kan den, men att välja exakta stopppositioner och färger utan en visuell preview omvandlar ett enkelt designbeslut till trial-and-error i DevTools. En generator låter dig se resultatet i realtid och exportera ren kod när det ser rätt ut.
Det här verktyget stöder alla tre moderna gradienttyper. Linjär är den klassiska riktningsblendningen du använder för hero-bakgrunder och knappar. Radiell sprider sig utåt från en punkt — bra för spotlighteffekter och vignjetter. Konisk sveper runt ett centrum, vilket gör den till förstabloppen för piechart-segment, färghjul och spinner-indikatorer. Börja från en av de inbyggda förinställningarna (Lime Swiss, Sunset, Sky, Aurora) eller designa från grunden.
Hur man genererar en CSS-gradient
Hela processen tar under en minut.
- 01
Välj en gradienttyp
Välj Linjär, Radiell eller Konisk från typväljaren. För linjär, ställ också in vinkeln. Förhandsvisningen uppdateras omedelbar.
- 02
Lägg till och positionera färgstopp
Klicka Lägg till stopp för att infoga ett nytt stopp, dra sedan dess skjutreglage eller skriv en procentsats för att positionera det. Upp till sex stopp stöds — stopp omsortering enligt position automatiskt.
- 03
Välj varje stopps färg
Klicka på färgfliken för att öppna systemfärvaljaren, eller skriv ett hex-värde direkt. Både RGB- och hex-format fungerar.
- 04
Förhandsgranska i realtid
Preview-panelen renderar din gradient med webbläsarens inbyggda gradientmotor, så resultatet matchar exakt vad CSS kommer att producera i produktion.
- 05
Kopiera CSS-deklarationen
Klicka Kopiera för att ta den kompletta background: linear-gradient(...) deklarationen. Klistra in i en stylesheet, en styled component, eller ett Tailwind-godtyckligt värde som bg-[<value>].
Vanliga användningsfall för gradienter
Varje gradienttyp utmärker sig i ett annat scenario.
- 01Hero-sektionsbakgrunder — linjär gradient vid 135° för ett modernt diagonalt svep.
- 02Knapphover-tillstånd — subtil tvåstopp linjär gradient för djup.
- 03Radiell spotlight eller vignjett — mörk-till-transparent radiell på en bildöverlagring.
- 04Piecharts och framstegringer — konisk gradient med hårda stopp.
- 05Färghjul väljare förhandsvisningar — fullspektrum konisk gradient.
- 06Textgradienter — applicera gradienten på bakgrunden, använd sedan background-clip: text.
Körs helt i din webbläsare
Gradientgeneratorn körs 100% klientsidg — ingen data skickas till någon server. Förhandsvisningen renderas av din webbläsares egen CSS-motor, vilket innebär att det du ser matchar vad vilken besökares webbläsare som helst kommer att rendera med samma CSS.
En praktisk anmärkning: e-postklienter har fortfarande spretig support för CSS-gradienter. Om du klistrar in genererad CSS i en HTML-e-postmall, lägg en solid background-color fallback innan gradienteringen för att mottagare på äldre klienter ska se något rimligt.
CSS Gradient Generator FAQ
Vad är skillnaden mellan linjär, radiell och konisk gradient?
Linjära gradienter övergår längs en rak linje vid en given vinkel. Radiella gradienter sprider sig utåt från en centralpunkt — användbar för höjdpunkter och spoteffekter. Koniska gradienter sveper runt ett centrum som klockhänder — idealisk för pijesegment och färghjul.
Kan jag använda detta för Tailwind CSS-projekt?
Ja. Kopiera det genererade värdet och använd det som ett Tailwind-godtyckligt värde, till exempel: bg-[linear-gradient(135deg,#ff6b6b,#4ecdc4)]. Tailwind kommer att inkludera det i din output-stylesheet.
Matchar förhandsvisningen exakt vad jag ser på den livewebbplatsen?
Ja — förhandsvisningen renderas av samma webbläsargs gradient-motor som kommer att rendera din live CSS, så utmatningen är pixelperfekt.
Kan jag använda CSS-gradienter i e-postmallar?
De flesta e-postklienter stöder inte CSS-gradienter tillförlitligt. Lägg alltid en solid background-color innan din gradientdeklaration som fallback.
Finns det en gräns för antalet färgstopp?
Generatorn stöder upp till sex stopp. För de flesta designer två till fyra är tillräckligt; mer än sex tenderar att minska klarhet snarare än att öka rikedom.