De flesta gradientverktyg ger dig bara en rad CSS. Det här verktyget ritar gradienten på en riktig canvas och låter dig ladda ner den färdiga PNG-filen i exakt den pixelstorlek du behöver - en telefonbakgrund, en 1920x1080 skrivbordsbakgrund, ett kvadratiskt inlägg eller en egen storlek. Inget laddas upp: bilden ritas och sparas helt på din egen enhet, så dina färger och filer förblir privata.
Gratis Gradientgenerator
Körs helt i din webbläsare - inget laddas upp, ingen registrering.
Typ
Bildstorlek
px
Färgstopp
Sparar en riktig PNG i 1920×1080 px
Vad är en gradientgenerator?
En gradientgenerator är ett verktyg som blandar två eller fler färger till en mjuk färgton och exporterar den som en bild du kan ladda ner. Välj dina färger och stopp, välj linjär eller radiell, ställ in storleken och spara en PNG till en bakgrundsbild, banner eller miniatyrbild. Allt körs i din webbläsare.
Så använder du verktyget
- 1Välj linjär eller radiell. Linjär blandar färger längs en rak linje i den vinkel du ställer in; radiell sprider dem utåt från mitten som en cirkel.
- 2Ställ in färger och stopp. Klicka på ett färgprov för att välja en färg och dra i reglaget för att flytta stoppet. Lägg till upp till 8 stopp eller ta bort ner till 2, och tryck på Slumpa för en snabb ide.
- 3Välj bildstorlek. Tryck på en förinställning (dator, telefon, kvadrat, socialt) eller skriv in en egen bredd och höjd i pixlar. Förhandsvisningen uppdateras direkt.
- 4Ladda ner PNG-filen. Klicka på Ladda ner PNG för att spara gradienten som en bild i full upplösning, eller kopiera CSS-koden för att återskapa samma gradient i kod.
Vem passar det för
- Designers och innehållsskapare som behöver en ren gradientbakgrund till en presentation, miniatyrbild, banner eller story utan att öppna Photoshop.
- Telefon- och datoranvändare som skapar en egen gradientbakgrund i exakt skärmens upplösning.
- Utvecklare som vill ha en lätt gradient-PNG som platshållare eller hero-bild, plus motsvarande CSS för att återskapa den i kod.
- Sociala medier-ansvariga som exporterar varumärkesanpassade gradientbakgrunder i rätt storlek för inlägg, stories och omslagsbilder.
Vanliga frågor
Är den här gradientgeneratorn gratis?
Ja - helt gratis, inget konto behövs, inga vattenstämplar och inga begränsningar. Skapa och ladda ner så många gradientbilder du vill.
Laddas något upp till en server?
Nej. Gradienten ritas och sparas helt i din webbläsare med canvas. Inga färger, bilder eller användningsdata skickas någonstans.
Vilket bildformat exporteras?
Verktyget exporterar en PNG, som håller gradienten helt mjuk och förlustfri utan komprimeringsartefakter. Filen sparas i den fulla pixelstorlek du ställt in, redo att användas som bakgrund eller laddas upp.
Vilken storlek ska jag välja för en gradientbakgrund?
Matcha din skärm. Vanliga val är 1920x1080 för de flesta datorer, 1080x1920 för en telefon i stående läge och 1080x1080 för ett kvadratiskt inlägg. Du kan också ange en egen bredd och höjd upp till 8000 pixlar.
Vad är skillnaden mellan en linjär och en radiell gradient?
En linjär gradient blandar färger längs en rak linje i en vinkel du väljer, så färgen förändras över bilden. En radiell gradient börjar från en mittpunkt och sprider sig utåt i en cirkel, så färgen ändras från mitten mot kanterna.
Kan jag få CSS-koden även, inte bara bilden?
Ja. Utöver den nedladdningsbara PNG-filen visar verktyget motsvarande background-image CSS. Kopiera den för att återskapa exakt samma gradient i en webbplats eller app istället för att använda bildfilen.
Hur fungerar färgstopp?
Varje stopp parar ihop en färg med en position från 0% till 100% längs gradienten. Övergången går mjukt mellan närliggande stopp. Om du placerar två stopp på samma position skapas en skarp kant istället för en toning, praktiskt för ränningar eller färgblocksbakgrunder.