# Flytende gradient: farge som flyter og virvler
[Canonical HTML page](https://gradiently.design/nb/guide/liquid-gradient)
Flytende gradienter ser ut som maling helt på et lerret eller blekk som snor seg i vann. De lages ved å bøye fargebånd, ikke ved å blande dem. Slik gjør du det.
## The short version
- En flytende gradient ser ut som helt maling fordi fargene forblir separate bånd som bøyer seg, virvler og blir tynnere og tykkere, fremfor å tones jevnt inn i hverandre.
- Den vanligste metoden er å begynne med rette fargestriper og forvrenge dem med et bøye-, flytende- eller forskyvningsfilter.
- På nettet kan et SVG-filter med feTurbulence og feDisplacementMap gjøre en stripet CSS-gradient til en marmorert, flytende overflate.
- Tynne, lyse bånd langs kurvene ser ut som lys som treffer en våt overflate og gjør effekten langt mer troverdig.
- Flytende gradienter er travle, så tekst trenger et rolig område eller en stor, enkel form der strømmen bremser.
En **flytende gradient** er farge som ser ut som den er helt utover fremfor blandet: kulørbånd som snor seg rundt hverandre, strekkes tynne ett sted og samler seg et annet, med et lysglimt langs kurvene. Tenk på akrylhelling, marmorerte forsatspapirer, olje på våt vei eller blekk dryppet i vann. Det overraskende er hvordan de lages. Du blander ikke farger for å komme dit. Du starter med rene striper og bøyer dem. Derfor lager et vanlig gradientverktøy aldri helt dette uttrykket alene.
## Hva som får farge til å se flytende ut
- **Bånd, ikke uttoninger.** Hver farge beholder sin identitet som et bånd. En bred, myk uttoning oppfattes som luft, ikke væske.
- **Varierende tykkelse.** Samme bånd sveller og smalner underveis, slik maling gjør når den flyter.
- **Ingen hjørner.** Hver vending er en kurve. Én skarp vinkel bryter illusjonen.
- **Lys på kurvene.** En tynn, lys linje langs noen kanter ser ut som et vått høylys.
- **Én strømretning.** Virvler som alle trekker samme vei, føles som én samlet helling.
## Fire uttrykk for flytende gradienter
Disse prøvene er råmaterialet: fargebåndene du skal bøye. Hver er én CSS-verdi som du kan kopiere som utgangspunkt for metodene nedenfor.
- Akrylbånd: `repeating-linear-gradient(115deg, #1e1b4b 0%, #4f46e5 6%, #f472b6 11%, #fde68a 14%, #1e1b4b 20%)`
- Marmorbånd: `repeating-linear-gradient(80deg, #f5f5f4 0%, #e7e5e4 7%, #a8a29e 9%, #f5f5f4 12%, #d6d3d1 18%)`
- Oljeflak: `conic-gradient(from 30deg at 40% 55%, #0f172a, #7c3aed, #06b6d4, #a3e635, #f59e0b, #db2777, #0f172a)`
- Smeltet metall: `linear-gradient(100deg, #1c1917 0%, #57534e 18%, #e7e5e4 26%, #78716c 34%, #1c1917 52%, #a8a29e 66%, #fafaf9 72%, #44403c 86%, #1c1917 100%)`
Striper klare for bøying. Det smeltede metallet har skarpe, lyse bånd mellom mørke, som blir kromhøylys når de bøyes.
- Dyp indigo: #1e1b4b
- Ultramarin: #4f46e5
- Hellingsrosa: #f472b6
- Kremhøylys: #fde68a
- Blågrønn celle: #0d9488
En palett for helling: en mørk bunn, to sterke mellomtoner, et lyst høylys brukt i tynne linjer og én aksent i små celler.
Legg merke til den lyse fargen. I et hellemaleri er den lyseste tonen vanligvis det tynneste båndet, og det er den som får de mørkere fargene rundt til å virke fyldige. Bruk den som høylys, ikke som fyll.
## Slik lager du en flytende gradient i et designverktøy
1. **Tegn striper** Fyll et arbeidsområde større enn sluttformatet med fem til åtte fargebånd på skrå. Gjør noen brede og andre svært tynne.
2. **Bøy hele flaten** Bruk en bøye-, virvel- eller bølgeforvrengning til å bøye stripene i en bred S-kurve. Gjør første omgang forsiktig.
3. **Skyv med en flytende pensel** Dra båndene i én retning med en stor, myk pensel for å lage virvler og ansamlinger. Arbeid fra stort til smått.
4. **Legg til noen høylys** Mal tynne, lyse linjer langs to eller tre kurver, med strømmen og med lav opasitet.
5. **Beskjær til den beste delen** Forvrengning etterlater rotete kanter. Beskjær til den mest interessante delen og tilpass den til formatet.
6. **Avslutt med korn** Et lett støylag skjuler eventuelle fargebånd fra strekkingen og gir overflaten en taktil følelse.
Navnene varierer mellom programmer, men de fleste redigeringsverktøy har bøying og et flytende- eller utgnidingsverktøy. [Photoshop-gradienter](https://gradiently.design/nb/guide/photoshop-gradient) og [Procreate-gradienter](https://gradiently.design/nb/guide/procreate-gradient) dekker de konkrete verktøyene i hver app.
## En flytende gradient med SVG og CSS
På nettet kan et SVG-filter stå for bøyingen. `feTurbulence` lager jevn støy, og `feDisplacementMap` bruker den til å flytte pikslene i en stripet gradient. Lav `baseFrequency` gir brede, langsomme virvler. Høy `scale` skyver båndene lenger.
```html
```
Akrylbånd bøyd av et SVG-forskyvningsfilter. Endre seed-verdien for en annen helling med samme farger.
> **Gjengi store flater én gang** Forskyvningsfiltre er krevende på store elementer. For en helsidebakgrunn, gjengi resultatet til et bilde i ønsket størrelse, eller hold filterelementet lite. [SVG feTurbulence](https://gradiently.design/nb/guide/svg-noise-filter) forklarer parameterne. [WebGL-gradienter](https://gradiently.design/nb/guide/shader-gradients) er veien til væske som beveger seg i sanntid.
## Få flytende gradienter til å bevege seg
Flytende er gradientstilen som nesten ber om bevegelse. En helling som driver langsomt i et toppbilde på et nettsted eller en story, føles levende. Hold farten lav, som om malingen er tykk, og lag en løkke der slutten stemmer med starten. Å animere turbulensen live er tungt, så en kort eksportert videoløkke er vanligvis bedre. En løkke på 8 til 15 sekunder gir hellingen tid til å bevege seg uten at noen oppdager gjentakelsen. Én MP4 i 1080×1920 dekker storyer, Reels og telefonbakgrunner. [Animerte gradientbakgrunner](https://gradiently.design/nb/guide/animated-gradient-background) dekker lettere metoder.
## Ord på en flytende gradient
### Motarbeider ordene
- Tynne bånd med høy kontrast bak overskriften
- Like tette virvler overalt
- Liten tekst over den travleste ansamlingen
- Høylys som krysser bokstavene
### Bærer ordene
- Et bredt, rolig bånd der strømmen bremser
- Travle virvler ved kantene, ro i midten
- Stor, tung skrift med få ord
- Høylys holdt unna teksten
Et stående innlegg med ordet Hell i stor skrift på en strømmende, flytende gradient
Ett ord i tung skrift, på et rolig fargestykke.
Et kvadratisk musikkcover med tittelen Undertow på en virvlende, flytende gradientbakgrunn
Et kvadratisk utgivelsesomslag. Flytende uttrykk passer til musikk fordi de føles som lyd gjort synlig.
Marks fra Gradiently er levende bakgrunner der materialene kan flyte og drive. Hver flytter automatisk den roligste delen av overflaten bak ordene dine. Pro eksporterer dem som GIF, MP4 eller WebM, så et flytende uttrykk kan bli en story eller en toppbildeløkke uten å bygge en shader. Les [tekst på en gradient](https://gradiently.design/nb/guide/text-on-gradient) om lesbarheten.
## FAQ
### Hvordan lager jeg en flytende gradient?
Tegn fargestriper og bøy dem med et bøye-, virvel- eller flytende-verktøy til de virvler. Legg til tynne, lyse høylys langs noen kurver og litt korn.
### Kan man lage en flytende gradient i CSS?
Hovedsakelig med hjelp fra SVG. Bruk et SVG-filter med `feTurbulence` og `feDisplacementMap` på en stripet CSS-gradient for å bøye den til et flytende mønster.
### Hva er forskjellen på en flytende gradient og en meshgradient?
En meshgradient blander farger jevnt over et nett. En flytende gradient beholder fargene som separate bånd som snor og strekker seg, som maling som er helt utover.
### Hvilke farger fungerer i en flytende gradient?
En mørk bunn, to sterke mellomfarger og en lys tone brukt bare i tynne bånd. Kontrasten mellom tykke, mørke og tynne, lyse bånd gjør at den oppfattes som væske.