CSS-animerad gradientbakgrundsgenerator

Skapa animerade gradientbakgrunder online, med stöd för flera färger, animationsriktningar och förinställningar, och generera CSS-kod 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

Välj färger först, justera sedan animationen och kopiera eller ladda ner koden. Förinställningar kan användas direkt som exempel eller redigeras vidare med färger, stopp, riktning, hastighet och utdata. All förhandsvisning, generering och sparning görs på den här sidan.

Liveförhandsvisning CSS Keyframes Text / kant / bakgrund Inställningar kan sparas

Antal färger-

Animationssätt-

Varaktighet-

Utdata-

Färginställningar

Det går snabbare att börja med ett exempel. Färgstopp påverkar gradientens övergångsrytm; behåll helst 2–6 färger.

Exempelupplägg Klick skriver över aktuella färger

Gradientbas Linjär passar webbakgrunder, radiell passar spotlight-effekter, konisk passar kanter eller badges

Gradienttyp

Gradientvinkel135°

135°

Radiellt / koniskt centrum

Färgstopp Minst 2 färger, upp till 8

Animationsparametrar

Använd gärna långsammare flöde som sidbakgrund. Aktivera stöd för minskad rörelse vid behov.

Animationssätt Välj annan logik för Keyframes

Rörelseriktning Keyframes som påverkar background-position

Hastighet och loop Större bakgrund ger tydligare färgrörelse

Animationstid10s

10s

Bakgrundsstorlek400%

400%

Animationskurva

Oändlig loop Fram och tillbaka Pausa vid hovring Stöd för minskad rörelse

Skapa och exportera

Ange klassnamn och användning, kopiera CSS till projektets stilfil och lägg till klassnamnet på målelementet.

Inställningar Samma färgschema kan ge bakgrunds-, text- eller kanteffekter

CSS-klassnamn

Utdata

Min. behållarhöjd (px)

Rundning (px)

Kantbredd (px)

Bakgrund innanför kant

Genererad CSS-kod

Exempel-HTML

Liveförhandsvisning

Animated Gradient Justera färg, riktning och hastighet så uppdateras effekten direkt. Passar hero, knappytor, kampanjsidor och visuella kort. CSS Ready

Gradienttyp-

Riktning-

Storlek-

Klassnamn-

Instruktioner

Användningsinstruktioner för programvaran

Välj färgschema:Klicka på ett exempelschema under ”Färginställningar”, eller lägg till, ta bort och justera färger och färgstopp manuellt.
Ställ in gradienttyp:Välj linjär, radiell eller konisk gradient och justera vinkel och mittpunkt efter behov.
Konfigurera animationsparametrar:Ställ in flödestyp, rörelseriktning, varaktighet, bakgrundsstorlek, animationskurva och loopmetod under ”Animationsparametrar”.
Välj användning för utdata:Välj bakgrundsbehållare, gradienttext eller gradientram under ”Generera export” och ange parametrar som CSS-klassnamn, rundade hörn och kantlinje.
Förhandsgranska effekten:På höger sida kan du växla mellan förhandsgranskningslägen för bakgrund, kort, text och kantlinje. Kontrollera effekten innan du genererar koden.
Kopiera eller ladda ned kod:Klicka på ”Kopiera CSS”, ”Kopiera HTML” eller ”Ladda ned CSS” för att använda koden på sidelement.
Spara inställningar:Klicka på ”Spara inställningar” för att behålla de aktuella parametrarna och fortsätta redigera nästa gång.

Vanliga frågor

Svar: Kopiera CSS-koden till din stilmall och lägg sedan till klassnamnet från exempel-HTML:en på elementet där gradienten ska visas.

Svar: Linjär gradient passar för sidbakgrunder och banners; radiell gradient passar för spotlight- och mjuka spridningseffekter; konisk gradient passar för ramar, märken och visuella effekter med rotationskänsla.

Svar: Du kan öka bakgrundsstorleken, lägga till fler färger, justera färgstopp eller välja animationssätt som diagonalt flöde eller andande flöde.

Svar: Ja. Välj ”Gradienttext” under användning för utdata, så genererar verktyget CSS-kod som innehåller background-clip:text.

Svar: Vanliga sidbakgrunder kan användas normalt. Om sidan innehåller många animationer rekommenderas att förlänga animationstiden, minska antalet färger och aktivera kompatibilitetskoden för reducerade rörelseeffekter.