Kortversionen
- En animerad gradientbakgrund är en färgövergång som rör sig över tid, oftast genom att glida i position, ändra form, skifta nyans eller låta ljuset andas.
- Lugna animerade gradienter rör en eller två egenskaper långsamt och tar flera sekunder eller mer för en hel cykel. Om allt rör sig samtidigt blir det rörigt.
- Färger som ligger nära varandra i färgcirkeln animeras rent, medan motsatta färger kan passera grått när de blandas.
- Text över en animerad gradient måste vara läsbar i varje ögonblick av loopen, även i de ljusaste och mörkaste bilderna.
- För sociala medier och video exporterar du animerade gradienter som sömlösa loopar i MP4, med en stillbild för platser som inte spelar upp video.
På den här sidan
En animerad gradientbakgrund är en färgövergång som rör sig: den glider över bilden, ändrar form, skiftar nyans eller ljusnar och mörknar, oftast i en loop bakom ord eller en produkt. De bästa ser ut som ljus som rör sig genom ett material. De svaga ser ut som en skärmsläckare. Det som skiljer dem åt är inte programvaran utan några val om vad som rör sig, hur snabbt och i vilka färger.
Den här guiden handlar om designsidan, för video, inlägg i sociala medier och skärmar. Om du bygger en i kod för en webbplats, se animerade gradienter i CSS och shadergradienter.
Vad som kan röra sig i en animerad gradient
Varje animerad gradient är någon kombination av fem sorters förändring. De flesta bra använder en, ibland två. Att använda alla fem samtidigt är det snabbaste sättet att få en bakgrund att kännas rastlös.
| Vad som rör sig | Vad du ser | Känns |
|---|---|---|
| Position | Hela fältet glider eller driver | Lugnt, rymligt, filmiskt |
| Form | Färgfläckar sväller, veckar sig eller flyter in i varandra | Organiskt, flytande |
| Nyans | Färgerna lutar åt ena hållet och tillbaka, eller vandrar runt cirkeln | Säsongsbetonat, lekfullt, energiskt när det går fort |
| Ljus | Ljusstyrkan andas in och ut | Stilla, lyxigt |
| Korn och partiklar | Fin struktur skimrar eller driver över färgen | Taktilt, filmiskt, stämningsfullt |
Hur snabbt en animerad gradient ska röra sig
Tempot avgör det mesta av stämningen. Långsam rörelse känns exklusiv och trygg, snabb rörelse känns brådskande. För en bakgrund bakom ord bör en hel cykel av förändring oftast ta många sekunder, inte en eller två. Om du tydligt kan följa rörelsen medan du läser rubriken är den förmodligen för snabb.
Rörelsen bör också mjukstartas och mjukstoppas i stället för att ticka på i jämn fart. Förändringar som börjar och slutar försiktigt ser naturliga ut, konstant fart ser mekanisk ut. Easing förklarar varför, med exempel.
Färger som animeras bra
Animation visar dig varje mellanfärg i en gradient, den ena efter den andra. En stillastående gradient kan gömma en tråkig mittpunkt i ett smalt band, men en rörlig dröjer kvar vid den. De säkraste paletterna är analoga: grannar i färgcirkeln, som indigo, violett och rosa, eller blågrönt, grönt och lime. Deras mellanfärger förblir livfulla.
Om du behöver motsatta färger, led dem genom en förmedlande färg, som i det mellersta exemplet, eller läs varför gradienter blir grå i mitten. Behåll en färg som grund som aldrig förändras särskilt mycket, oftast den mörkaste. Den förankrar rörelsen och ger orden en stabil plats.
Så håller du texten läsbar över en rörlig gradient
Text på en stillastående gradient behöver bara synas mot en bakgrund. Över en animerad gradient måste den synas mot varje bild i loopen. Det klassiska misslyckandet är en rubrik som är helt tydlig i början och försvinner i två sekunder när en ljus färgfläck driver förbi bakom den.
Undvik
- Att bara kontrollera kontrasten i första bilden
- Ljusa färgfläckar som driver genom orden
- Att flytta texten och bakgrunden samtidigt
- Stora nyanscykler bakom brödtext
Gör så
- Spola igenom loopen och kontrollera de ljusaste och mörkaste ögonblicken
- Låt den lugnaste delen av fältet ligga bakom orden
- Håll orden stilla och låt färgen röra sig
- Spara starka färgskiften till bakgrunder med korta rubriker
Vissa verktyg hjälper till här. I Gradiently vet Mark bakom en design var orden finns, och dess lugnaste område med bäst kontrast stannar bakom dem medan den rör sig. För de allmänna principerna, se så lägger du text på en gradient.
Så designar du en animerad gradient, steg för steg
- 1
Designa stillbilden
Välj grund, tre till fem färger och textens layout. Den ska fungera som stillbild innan den rör sig.
- 2
Välj en ledande rörelse
Drift, flöde, ett nyansskifte eller andande ljus. Anpassa den efter varumärket: lugna varumärken glider, livliga kan flöda eller virvla.
- 3
Sätt ett långsamt tempo
Börja långsammare än det känns naturligt och öka först om rörelsen är svår att märka.
- 4
Gör den loopande
Sista bilden måste leda tillbaka till den första. Sömlösa loopar förklarar hur.
- 5
Kontrollera varje ögonblick
Spola igenom loopen och pausa vid de ljusaste och mörkaste punkterna för att kontrollera orden.
- 6
Exportera för platsen där den ska spelas
MP4 för sociala medier och webbplatser, GIF bara för e-post och en PNG-stillbild för allt annat. GIF eller MP4 förklarar valet.
En stående story är det naturliga hemmet för en animerad gradient: korta ord som hålls stilla, färg som rör sig bakom.
Där animerade gradientbakgrunder fungerar bäst
- Stories och reels, där video förväntas. Håll orden inom säkerhetszonerna, se bakgrunder för Reels och TikTok.
- Inlägg i flödet för annonseringar och erbjudanden, där rörelse får inlägget att sticka ut.
- Webbplatsers hero-ytor, som en kort ljudlös video eller en levande bakgrund, med en stillbild som reserv. Videobakgrunder på webbplatser går igenom detaljerna.
- Scen- och butiksskärmar, där långa, långsamma loopar spelas i timmar.
- Videointron och outron, som ett stilla fält bakom en titel.
Om du använder Gradiently kan varje design exporteras som en loop på 5 till 30 sekunder: välj en rörelse som Drift, Flöde, Andas eller Virvel, ett tempo, hur färgen beter sig och om partiklar ska driva över den. Loopen görs så att slutet möter början.
Vanliga frågor
Vad är en animerad gradientbakgrund?
Det är en färgövergång som rör sig över tid genom att driva, flöda, skifta nyans eller låta ljuset andas, oftast som en loop bakom ord, produkter eller video.
Hur snabbt ska en animerad gradient röra sig?
Långsamt, för de flesta bakgrunder. En hel cykel av förändring bör ta många sekunder, och du ska inte kunna följa rörelsen bekvämt medan du läser rubriken.
Vilka färger passar bäst för en animerad gradient?
Grannnyanser, som indigo, violett och rosa, animeras renast. Motsatta färger behöver en förmedlande färg emellan, annars passerar de grått.
Hur håller jag texten läsbar på en animerad gradient?
Kontrollera orden vid loopens ljusaste och mörkaste ögonblick, låt den lugnaste delen av fältet ligga bakom dem och håll texten stilla.
Vilket format ska jag exportera en animerad gradient i?
MP4 för sociala plattformar och webbplatser. Använd GIF bara där video inte spelas, till exempel i e-post, och behåll en PNG-stillbild som reserv.
Skriven av Gradiently
Teamet bakom Gradiently, ett designverktyg byggt kring Marks: levande gradienter som får allt du gör att kännas som ditt.
Se vår profil
