Färgverktyg

CSS-gradientgenerator: linjär, radiell och konisk – Gratis

Gratis, ingen registrering, fungerar i din webbläsare. Skapa en linjär, radiell eller konisk gradient med 2 till 8 färgstopp och kopiera CSS-koden. Ladda ner den som PNG-bild i HD eller 4K.

Färgstopp

  • 0%
  • 100%

CSS

background: #ff7ac6;
background: linear-gradient(135deg, #ff7ac6 0%, #ffe14d 100%);

Första raden är en enfärgad reservfärg för mycket gamla enheter som inte kan visa övertoningar.

Börja från en förinställning

Skapas på din enhet.

Varför använda CSS-gradientgenerator

100% gratis
Använd den så ofta du vill. Ingen registrering, ingen vattenstämpel, inget att installera.
Privat i sin design
Det du skriver stannar i din webbläsare och skickas aldrig till oss.
Fungerar på alla enheter
Körs i din webbläsare på Windows, Mac, Linux, Android och iPhone. Ingen app behövs.

Så använder du CSS-gradientgenerator

  1. Välj Typ: Linjär, Radiell eller Konisk. Ställ in riktningen med reglaget, eller välj Cirkel eller Ellips för en radiell gradient.
  2. Under Färgstopp väljer du varje färg eller skriver en kod, och drar i dess reglage för att ange var den ligger. Använd Lägg till ett stopp för fler färger, upp till 8, och Vänd för att byta ordning.
  3. Eller klicka på en av förinställningarna under Börja från en förinställning och ändra den därifrån.
  4. Klicka på Kopiera CSS och klistra in den i din stilmall, eller välj en Bildstorlek och klicka på Ladda ner PNG.

Vanliga frågor

Hur använder jag CSS:en?

Klistra in båda raderna i regeln för elementet du vill färglägga, till exempel body eller en knapp. Den första raden är en reservfärg i ren färg; den andra är gradienten.

Vad är skillnaden mellan linjär, radiell och konisk?

Linjär blandar längs en rak linje, radiell sprider sig från mitten i en cirkel eller ellips, och konisk sveper runt mitten som ett färghjul eller ett cirkeldiagram.

Hur ändrar jag riktningen på en linjär gradient?

Dra reglaget Riktning från 0° till 360°. 0° går från nedre till övre kanten, 90° från vänster till höger, 180° från övre till nedre kanten och 135° går diagonalt mot nedre högra hörnet.

Hur många färger kan en gradient ha?

Från 2 till 8 färgstopp. Varje stopp har en position från 0% till 100%; lägg två stopp på samma position för en hård linje mellan färgerna i stället för en övertoning.

Kan jag använda transparens?

Ja. Skriv en färg som rgba(47, 91, 255, 0.5) eller en HEX-kod med 8 siffror i ett stopp, så tonas gradienten bort till genomskinligt där.

Kan jag ladda ner gradienten som bild?

Ja. Välj 1920 × 1080, 3840 × 2160, 1080 × 1080, 1080 × 1920 eller 1500 × 500 och klicka på Ladda ner PNG, för en bakgrundsbild, en presentationsbild, ett inlägg på sociala medier eller ett sidhuvud.

Fungerar CSS:en med Tailwind, React eller WordPress?

Ja. Koden är vanlig CSS, så lägg den i en klass i din stilmall (eller en ruta för egen CSS) och lägg till klassen på elementet. Den fungerar i alla moderna webbläsare.

Laddas något upp?

Nej. Gradienter skapas på din enhet.

Är CSS-gradientgenerator gratis?

Ja. Det är gratis att använda, utan registrering och utan att något behöver installeras.

Hjälp och guider (på engelska)

Relaterade verktyg