# Flytande gradienter: strömmande färg som ser hälld ut
[Canonical HTML page](https://gradiently.design/sv/guide/liquid-gradient)
Flytande gradienter ser ut som färg hälld på en duk eller bläck som slingrar sig genom vatten. De görs genom att böja band av färg, inte genom att blanda dem. Så gör du.
## The short version
- 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.
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.
- Akrylhällningsband: `repeating-linear-gradient(115deg, #1e1b4b 0%, #4f46e5 6%, #f472b6 11%, #fde68a 14%, #1e1b4b 20%)`
- Marmorband: `repeating-linear-gradient(80deg, #f5f5f4 0%, #e7e5e4 7%, #a8a29e 9%, #f5f5f4 12%, #d6d3d1 18%)`
- Oljehinna: `conic-gradient(from 30deg at 40% 55%, #0f172a, #7c3aed, #06b6d4, #a3e635, #f59e0b, #db2777, #0f172a)`
- Smält metall: `linear-gradient(100deg, #1c1917 0%, #57534e 18%, #e7e5e4 26%, #78716c 34%, #1c1917 52%, #a8a29e 66%, #fafaf9 72%, #44403c 86%, #1c1917 100%)`
Ränder redo att förvrängas. Den smälta metallen har skarpa, ljusa band mellan mörka, som blir kromhögdager när de böjs.
- Djup indigo: #1e1b4b
- Ultramarin: #4f46e5
- Hällningsrosa: #f472b6
- Grädd-högdager: #fde68a
- Blågrön cell: #0d9488
En hällningspalett: en mörk bas, två starka mellantoner, en blek högdager som används i tunna linjer och en accent som syns i små celler.
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](https://gradiently.design/sv/guide/photoshop-gradient) och [gradienter i Procreate](https://gradiently.design/sv/guide/procreate-gradient) 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.
```html
```
Akrylhällningsband böjda av ett SVG-förskjutningsfilter. Ändra seed för att få en annan hällning av samma färger.
> **Rendera en gång för stora ytor** Förskjutningsfilter är dyra på stora element. För en bakgrund över hela sidan, rendera resultatet till en bild i den storlek du behöver, eller håll det filtrerade elementet litet. [SVG feTurbulence](https://gradiently.design/sv/guide/svg-noise-filter) förklarar parametrarna, och [WebGL-gradienter](https://gradiently.design/sv/guide/shader-gradients) är vägen för vätska som rör sig i realtid.
## 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](https://gradiently.design/sv/guide/animated-gradient-background) 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 stående inlägg med det enda ordet Hällning i stor stil på en flödande flytande gradient
Ett ord, kraftig text, satt på en lugn sträcka av färg.
Ett kvadratiskt musikomslag med titeln Underström på en virvlande flytande gradientbakgrund
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](https://gradiently.design/sv/guide/text-on-gradient) för läsbarhetssidan.
## FAQ
### 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.