Onlinegenerator för gradientbakgrunder

Förhandsgranska CSS-toningseffekter i realtid, stöder linjära, radiella och koniska toningar, generera kod och exportera bilder med ett klick

Felrapport

Körningsläge i webbläsaren: Dina data bearbetas i webbläsaren och laddas inte upp till servern.

Hastighet och stabilitet: Bearbetningshastigheten beror på din enhet och webbläsare. För stora batchjobb kan skrivbordsversionen vara stabilare.

Verktyget laddas, vänta...

Om onlineverktyget inte kan laddas eller köras, prova skrivbordsverktyget. https://tools.yikeaigc.com/

Verktygsanvändning

Återgå till gamla versionen

Ställ in gradienten först, kopiera sedan koden eller exportera bilden. Stöder linjära, radiella, koniska och upprepade gradienter samt flerfärgsstopp. Ändringar visas direkt i förhandsvisningen till höger.

Ställ in gradient

Välj först gradienttyp, justera sedan riktning och färgstopp. Färgstopp bör vara sorterade från lågt till högt.

GradienttypKonisk gradient passar för vinkelfärghjul och ringbakgrunder

Riktning och formLinjära gradienter kan använda vinkel eller snabb riktning

Linjär vinkel90°

Upprepningsperiod32%

Radiell form

Spridningsområde

Upprepningsperiod32%

Centrum X50%

Centrum Y50%

Startvinkel0°

Centrum X50%

Centrum Y50%

Upprepa gradient Mjukt ljuslager Vinjettering Fina linjer

FärgnoderStöder 2–10 noder, med opacitet och position

ExempelmallarKan användas som startpunkt för färgjustering

Kodexport

När förhandsvisningen är klar kan du kopiera CSS eller exportera PNG-, JPG-, SVG- och CSS-filer samt resurspaket.

KodformatVälj deklaration efter utvecklingsscenario

Kodläge

Klassnamn / variabelnamn

Inkludera reservbakgrundsfärg Minifiera kod

CSS-kod

BildmåttAnpassad storlek används för bild- och SVG-export

Storleksförval

JPG-kvalitet92%

Bredd (px)

Höjd (px)

Ladda ner resurserResurspaketet innehåller CSS, SVG, PNG och inställnings-JSON

Liveförhandsvisning

Gradient Preview Uppdateras direkt efter ändring

TypLinjär

Färgnoder2

Exportstorlek1920x1080

Kodlängd0

Instruktioner

Användningsinstruktioner

Ställ in övertoningstyp:Välj linjär övertoning, radiell övertoning eller konisk övertoning. Linjär passar för banners och webbsidesbakgrunder, radiell passar för effekter som sprids från mitten, och konisk passar för ringar, färghjul och dekorativa mönster.
Justera riktning och form:
- Linjär övertoning:Du kan använda riktningsknapparna eller ställa in riktningen 0-360 grader med vinkelreglaget.
- Radiell övertoning:Du kan ställa in cirkel eller ellips, spridningsområde samt centrumposition X/Y.
- Konisk övertoning:Du kan ställa in startvinkel och centrumposition.
Konfigurera färgstopp:Använd färgväljare, HEX-inmatningsfält, positionsprocent och transparensparametrar för att styra varje färgstopp. Du kan lägga till, ta bort, sortera och vända färger samt fördela stoppen jämnt med ett klick.
Använd effektalternativ:Du kan aktivera upprepad övertoning, mjukt ljus-lager, vinjettering och fina linjer för att göra bakgrunden mer lämplig för webbsidors första vy, kort, affischer och designmaterial.
Kopiera och exportera:I ”Kodexport” kan du välja CSS-klassnamn, endast deklaration eller CSS-variabelläge, kopiera CSS-kod och även exportera PNG-, JPG-, SVG- och CSS-filer samt ZIP-resurspaket.
Spara och dela:I ”Spara och dela” kan du spara aktuella inställningar, skapa en delningslänk eller klistra in befintlig CSS-övertoningskod i verktyget för fortsatt redigering.

Vanliga frågor

Svar: Linjär övertoningövergår längs en rak riktning och passar för webbsidesbakgrunder, knappar och banners; radiell övertoningsprids utåt från en centrumpunkt och passar för spotlight- och skiktade bakgrunder; konisk övertoningroterar runt mitten och passar för färghjul, ringar och dekorativa effekter.

Svar: Klicka på ”Lägg till färg” för att lägga till färgstopp och ställ sedan in färg, positionsprocent och transparens för varje stopp. Stoppens position påverkar färgövergångens omfång, och du kan också använda ”Jämn fördelning” för att snabbt ordna stoppen.

Svar: Upprepade övertoningar passar för att skapa regelbundna bakgrunder som ränder, vågor och cirkulära upprepade texturer. Linjära och radiella övertoningar kan använda upprepningsläge, medan koniska övertoningar bör styras med färgpunkter och vinklar för önskad effekt.

Svar: Du kan exportera PNG-, JPG-, SVG- och CSS-filer samt ladda ner ett ZIP-resurspaket. Resurspaketet innehåller CSS-kod, SVG-filer, PNG-bilder och inställningar i JSON, vilket gör det enkelt att arkivera och redigera vidare.

Svar: Kopiera den genererade CSS-koden och klistra in den i webbplatsens stilmall. Verktyget erbjuder tre lägen: CSS-klassnamn, endast deklarationer och CSS-variabler, så att du kan välja efter projektets arbetssätt.

Svar: Ja. Klistra in linear-gradient-, radial-gradient- eller conic-gradient-kod i området ”Importera CSS” under ”Spara och dela” och klicka på ”Läs in i verktyget” för att fortsätta justera färger, vinkel och position.

Svar: Nej. Generering av övertoningar, kopiering av kod, bildritning och paketering av resurser görs lokalt och kräver inte att designinnehåll laddas upp till servern.