Att skriva gradient-syntax för hand är pilligt: vinkeln, ordningen på stoppen och procentpositionerna påverkar varandra, och ett litet skrivfel förstör tyst hela background-egenskapen. Den här generatorn håller förhandsvisning och kod perfekt synkade - det du ser är exakt, tecken för tecken, den CSS du kopierar. Allt körs helt i webbläsaren, så inget du designar laddas upp någonstans.
Gratis CSS Gradient Generator
Körs helt i din webbläsare - inget laddas upp, ingen registrering.
Typ
Färgstopp
CSS-kod
Vad är en CSS gradient generator?
En CSS gradient generator är ett visuellt verktyg som skriver koden för linear-gradient(), radial-gradient() eller conic-gradient() åt dig. Du väljer färger, drar stoppens position, ställer in vinkeln, och färdig CSS-kod dyker upp direkt medan förhandsvisningen visar exakt vad webbläsaren kommer att rendera. Allt körs i webbläsaren.
Så använder du verktyget
- 1Välj gradienttyp. Välj linjär, radiell eller konisk. Linjär visar ett vinkelreglage; radiell lägger till form (cirkel eller ellips) och position; konisk har en startvinkel och en position.
- 2Ställ in dina färgstopp. Klicka på varje färgruta för att välja en färg och dra dess reglage för att flytta stoppet längs gradienten. Lägg till upp till 8 stopp eller ta bort ner till 2.
- 3Justera riktningen. Dra vinkelreglaget (0-360 grader) eller välj ett positionsord. Förhandsvisningen uppdateras live vid varje ändring.
- 4Kopiera CSS-koden. Klicka på Copy för att hämta background-deklarationen, inklusive en reservrad med enfärgad bakgrund, och klistra in den i ditt stilmallsdokument.
Vem passar det för
- Front end-utvecklare som behöver en bakgrund till en hero-sektion, ett kort eller en knapp och vill ha den exakta
linear-gradient()-raden utan att lära sig syntaxen utantill. - Webb- och UI-designers som matchar en mockup: bygg upp gradienten visuellt och skicka sedan den genererade CSS-koden direkt till utvecklarteamet.
- De som bygger e-post och landningssidor och behöver en reservrad med enfärgad bakgrund så att designen degraderas snyggt i äldre klienter - resultatet inkluderar automatiskt en sådan.
- Studenter som lär sig CSS och vill se i realtid hur vinkel, färgstopp och gradienttyp ändrar det renderade resultatet.
Vanliga frågor
Är den här CSS gradient generatorn gratis?
Ja - 100 % gratis, inget konto, inga vattenstämplar, inga gränser. Bygg hur många gradienter du vill och kopiera CSS-koden rakt in i ditt projekt.
Skickas något till en server?
Nej. Gradienten byggs och förhandsvisas helt i din webbläsare med vanlig JavaScript. Inga färger, ingen kod och inga användardata skickas någonstans.
Vad är skillnaden mellan linjär, radiell och konisk gradient?
En linjär gradient blandar färger längs en rak linje i den vinkel du väljer. En radiell gradient strålar utåt från en mittpunkt som en cirkel eller ellips. En konisk gradient sveper färger runt en mittpunkt, ungefär som ett färghjul eller ett tårtdiagram.
Hur fungerar färgstopp i CSS-gradienter?
Varje stopp parar ihop en färg med en position mellan 0 % och 100 % längs gradientlinjen. Webbläsaren blandar mjukt mellan intilliggande stopp. Placerar du två stopp på samma position skapas en skarp kant istället för en toning - användbart för ränder eller tårtdiagram-effekter.
Vilka webbläsare stödjer dessa gradienter?
Alla moderna webbläsare - Chrome, Firefox, Safari och Edge - stödjer linear-gradient() och radial-gradient() utan prefix; conic-gradient() har stötts överallt sedan 2020. Den kopierade koden innehåller också en enfärgad reserv för äldre webbläsare.
Kan jag använda den genererade gradienten som textfärg?
Inte direkt - gradienter är bilder, inte färger. Använd gradienten som background-image på textelementet och lägg sedan till background-clip: text och color: transparent så att gradienten syns genom bokstäverna.
Varför visar min gradient ränder (banding)?
Ränder uppstår när två avlägsna stopp blandas över en lång sträcka av liknande nyanser och avslöjar de 8-bitars färgstegen. Minska det genom att lägga till ett mellanliggande färgstopp, korta ner blandningsavståndet eller välja färger som skiljer sig både i ljushet och nyans.