Kortversionen
- En flytande gradient ser hälld ut eftersom dess färger förblir separata band som böjer sig, virvlar, smalnar och tjocknar, i stället för att tona jämnt in i varandra.
- Det vanliga sättet att göra en är att börja med raka färgränder och förvränga dem med ett warp-, liquify- eller displacement-filter.
- På webben kan ett SVG-filter som kombinerar feTurbulence och feDisplacementMap förvandla en randig CSS-gradient till en marmorerad, flytande yta.
- Tunna ljusa band längs kurvorna läses som ljus som fångas av en blöt yta och gör effekten mycket mer övertygande.
- Flytande gradienter är livliga, så text behöver ett lugnt område eller en stor, enkel form där flödet saktar ned.
På den här sidan
En flytande gradient är färg som ser hälld ut snarare än blandad: band av nyans som slingrar sig runt varandra, sträcks tunna på ett ställe och samlas på ett annat, med en glimt av ljus längs kurvorna. Tänk på akrylhällningsmålningar, marmorerade försättsblad, olja på en blöt väg eller bläck som droppas i vatten. Det överraskande är hur de görs. Du blandar inte färger för att komma dit, du börjar med rena ränder och böjer dem. Därför lyckas ett vanligt gradientverktyg aldrig riktigt skapa looken på egen hand.
Vad som får färg att se flytande ut
- Band, inte gradienter. Varje färg behåller sin identitet som ett band. En bred mjuk gradient läses som luft, inte vätska.
- Varierande tjocklek. Samma band sväller och smalnar under färden, som färg gör när den flyter.
- Inga hörn. Varje sväng är en kurva. En enda skarp vinkel bryter illusionen.
- Ljus på kurvorna. En tunn blek linje längs några kanter läses som en blöt högdager.
- En flödesriktning. Virvlar som alla lutar åt samma håll känns som en enda hällning.
Fyra looks för flytande gradienter
De här proverna är råmaterialet: färgbanden du skulle böja. Var och en är ett enda CSS-värde, så du kan kopiera den som utgångspunkt för vilken som helst av metoderna nedan.
Lägg märke till den bleka färgen. I en hällningsmålning är den ljusaste tonen oftast det smalaste bandet, och det är den som får de mörkare färgerna runt omkring att se rika ut. Använd den som en högdager, inte som fyllning.
Så gör du en flytande gradient i ett designverktyg
- 1
Rita ränder
Fyll en duk som är större än din slutliga storlek med fem till åtta färgband i vinkel. Gör några band breda och några mycket tunna.
- 2
Förvräng helheten
Använd en warp-, twirl- eller vågförvrängning för att böja ränderna till en bred S-kurva. Håll första omgången försiktig.
- 3
Knuffa med en liquify-pensel
Dra banden åt ett håll med en stor, mjuk pensel för att skapa virvlar och pölar. Arbeta från stort till smått.
- 4
Lägg till några högdagrar
Måla tunna bleka linjer längs två eller tre kurvor, i flödets riktning, med låg täckning.
- 5
Beskär den bästa delen
Förvrängning lämnar stökiga kanter. Beskär till den mest intressanta delen och anpassa storleken till ditt format.
- 6
Avsluta med korn
Ett lätt brusskikt döljer all bandning från sträckningen och ger ytan en taktil känsla.
Programvaror skiljer sig i namngivning, men de flesta redigerare har ett warp och ett liquify- eller smudge-verktyg. Gradienter i Photoshop och gradienter i Procreate går igenom de specifika verktygen i vart och ett.
En flytande gradient med SVG och CSS
På webben kan ett SVG-filter sköta förvrängningen. feTurbulence genererar mjukt brus och feDisplacementMap använder det för att knuffa runt pixlarna i en randig gradient. En låg baseFrequency ger breda, långsamma virvlar, och en hög scale knuffar banden längre.
<svg width="0" height="0" style="position:absolute">
<filter id="liquid" x="-20%" y="-20%" width="140%" height="140%">
<feTurbulence type="fractalNoise" baseFrequency="0.003 0.006" numOctaves="2" seed="11" />
<feDisplacementMap in="SourceGraphic" scale="220" xChannelSelector="R" yChannelSelector="G" />
</filter>
</svg>
<div class="liquid"></div>
<style>
.liquid {
width: 100%;
aspect-ratio: 16 / 9;
background: repeating-linear-gradient(115deg,
#1e1b4b 0%, #4f46e5 6%, #f472b6 11%, #fde68a 14%, #1e1b4b 20%);
filter: url(#liquid);
}
</style>Få flytande gradienter att röra sig
Flytande är den gradientstil som nästan ber om att få röra sig. En hällning som långsamt driver förbi i en hero på en webbplats eller en story känns levande. Håll farten låg, som om färgen vore tjock, och loopa den så att slutet matchar början. Att animera turbulensen live är tungt, så en kort exporterad videoloop är oftast den bättre vägen. En loop på 8 till 15 sekunder ger en hällning tid att färdas utan att någon upptäcker upprepningen, och en MP4 i 1080×1920 duger till stories, reels och telefonbakgrunder från en enda fil. Animerade gradientbakgrunder tar upp lättare angreppssätt.
Text på en flytande gradient
Kämpar mot orden
- Tunna band med hög kontrast bakom rubriken
- Virvlar överallt med samma täthet
- Liten text över den livligaste pölen
- Högdagrar som korsar bokstäverna
Bär orden
- Ett brett, lugnt band där flödet saktar ned
- Livliga virvlar i kanterna, lugnt i mitten
- Stor, kraftig text med få ord
- Högdagrar som hålls borta från texten
Ett ord, kraftig text, satt på en lugn sträcka av färg.
Ett kvadratiskt släppomslag. Flytande looks passar musik eftersom de känns som ljud gjort synligt.
Gradiently-Marks är levande bakgrunder vars material kan flyta och driva, och var och en flyttar ytans lugnaste del bakom dina ord automatiskt. Pro exporterar dem som GIF, MP4 eller WebM, så en flytande look kan bli en story eller en hero-loop utan att du bygger en shader. Läs text på gradient för läsbarhetssidan.
Vanliga frågor
Hur gör jag en flytande gradient?
Rita ränder av färg och böj dem sedan med ett warp-, twirl- eller liquify-verktyg tills de virvlar. Lägg till tunna bleka högdagrar längs några kurvor och lite korn.
Kan man göra en flytande gradient i CSS?
Mest med hjälp av SVG. Använd ett SVG-filter med feTurbulence och feDisplacementMap på en randig CSS-gradient för att böja den till ett flytande mönster.
Vad är skillnaden mellan en flytande gradient och en mesh-gradient?
En mesh-gradient blandar färger mjukt över ett rutnät. En flytande gradient behåller färgerna som tydliga band som slingrar sig och sträcks, som hälld färg.
Vilka färger fungerar för en flytande gradient?
En mörk bas, två starka mellanfärger och en blek ton som bara används i tunna band. Kontrasten mellan tjocka mörka band och tunna ljusa är det som läses som vätska.
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