# Flydende gradienter: farver der ser hældt ud
[Canonical HTML page](https://gradiently.design/da/guide/liquid-gradient)
Flydende gradienter ligner maling hældt ud over et lærred eller blæk, der krøller sig gennem vand. De laves ved at bøje farvebånd, ikke ved at blande dem. Her er hvordan.
## The short version
- En flydende gradient ser hældt ud, fordi farverne forbliver adskilte bånd, der bøjer, hvirvler, tyndes og fyldes, i stedet for at tone jævnt over i hinanden.
- Den sædvanlige måde at lave en på er at starte med lige farvestriber og forvrænge dem med et warp-, liquify- eller displacement-filter.
- På nettet kan et SVG-filter, der kombinerer feTurbulence og feDisplacementMap, forvandle en stribet CSS-gradient til en marmoreret, flydende overflade.
- Tynde, lyse bånd langs kurverne aflæses som lys, der rammer en våd overflade, og gør effekten langt mere overbevisende.
- Flydende gradienter er urolige, så tekst kræver et roligt område eller en stor, enkel form, hvor strømmen sænker farten.
En **flydende gradient** er farve, der ser hældt ud frem for blandet: farvebånd, der krøller sig om hinanden, strækkes tynde ét sted og samler sig et andet, med et glimt af lys langs kurverne. Tænk på akryl-pour-malerier, marmorerede forsatsblade, olie på en våd vej eller blæk dryppet i vand. Det overraskende er, hvordan de laves. Du blander ikke farver for at nå dertil; du starter med rene striber og bøjer dem. Derfor giver et almindeligt gradientværktøj aldrig helt udtrykket alene.
## Hvad der får farver til at se flydende ud
- **Bånd, ikke udtoninger.** Hver farve bevarer sin identitet som et bånd. En bred, blød udtoning aflæses som luft, ikke væske.
- **Skiftende tykkelse.** Det samme bånd svulmer og smalner, mens det bevæger sig, som maling gør, når den flyder.
- **Ingen hjørner.** Hvert sving er en kurve. Én skarp vinkel bryder illusionen.
- **Lys på kurverne.** En tynd, lys linje langs et par kanter aflæses som et vådt højlys.
- **Én strømretning.** Hvirvler, der alle hælder samme vej, føles som én enkelt hældning.
## Fire udtryk med flydende gradienter
Disse prøver er råmaterialet: de farvebånd, du skal bøje. Hver er en enkelt CSS-værdi, så du kan kopiere den som udgangspunkt for alle metoderne nedenfor.
- Bånd til akryl-pour: `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%)`
- Oliefilm: `conic-gradient(from 30deg at 40% 55%, #0f172a, #7c3aed, #06b6d4, #a3e635, #f59e0b, #db2777, #0f172a)`
- Smeltet metal: `linear-gradient(100deg, #1c1917 0%, #57534e 18%, #e7e5e4 26%, #78716c 34%, #1c1917 52%, #a8a29e 66%, #fafaf9 72%, #44403c 86%, #1c1917 100%)`
Striber klar til at blive forvrænget. Det smeltede metal har skarpe, lyse bånd mellem mørke, som bliver til kromhøjlys, når de bøjes.
- Dyb indigo: #1e1b4b
- Ultramarin: #4f46e5
- Pour-pink: #f472b6
- Cremet højlys: #fde68a
- Petrolcelle: #0d9488
En pour-palet: en mørk base, to stærke mellemtoner, et lyst højlys brugt i tynde linjer og én accent, der dukker op i små celler.
Læg mærke til den lyse farve. I et pour-maleri er den lyseste tone som regel det tyndeste bånd, og den får de mørkere farver omkring den til at se fyldige ud. Brug den som et højlys, ikke som en flade.
## Sådan laver du en flydende gradient i et designprogram
1. **Tegn striber** Fyld et lærred, der er større end din endelige størrelse, med fem til otte skrå farvebånd. Gør nogle bånd brede og nogle meget tynde.
2. **Forvræng det hele** Brug en warp-, twirl- eller bølgeforvrængning til at bøje striberne i en bred S-kurve. Hold første omgang blid.
3. **Skub med en liquify-pensel** Træk båndene i én retning med en stor, blød pensel for at skabe hvirvler og pøle. Arbejd fra stort til småt.
4. **Tilføj et par højlys** Mal tynde, lyse linjer langs to eller tre kurver, med strømmen, i lav opacitet.
5. **Beskær den bedste del** Forvrængning efterlader rodede kanter. Beskær til det mest interessante udsnit, og tilpas størrelsen til dit format.
6. **Afslut med korn** Et let støjlag skjuler eventuel banding fra strækningen og giver overfladen en taktil fornemmelse.
Programmerne navngiver tingene forskelligt, men de fleste har et warp-værktøj og et liquify- eller smudge-værktøj. [Gradienter i Photoshop](https://gradiently.design/da/guide/photoshop-gradient) og [gradienter i Procreate](https://gradiently.design/da/guide/procreate-gradient) gennemgår de konkrete værktøjer i hvert program.
## En flydende gradient med SVG og CSS
På nettet kan et SVG-filter stå for forvrængningen. `feTurbulence` genererer jævn støj, og `feDisplacementMap` bruger den til at skubbe pixels i en stribet gradient rundt. En lav `baseFrequency` giver brede, langsomme hvirvler; en høj `scale` skubber båndene længere.
```html
```
Bånd til akryl-pour bøjet af et SVG-displacement-filter. Skift seed for at få en anden hældning med de samme farver.
> **Gengiv én gang til store flader** Displacement-filtre er tunge på store elementer. Til en baggrund på en hel side skal du gengive resultatet som et billede i den størrelse, du har brug for, eller holde det filtrerede element lille. [SVG feTurbulence](https://gradiently.design/da/guide/svg-noise-filter) forklarer parametrene, og [WebGL-gradienter](https://gradiently.design/da/guide/shader-gradients) er vejen til væske, der bevæger sig i realtid.
## Sådan får du flydende gradienter til at bevæge sig
Flydende er den ene gradientstil, der nærmest beder om at bevæge sig. En hældning, der langsomt driver i en hero på en hjemmeside eller i en story, føles levende. Hold farten lav, som om malingen var tyk, og lad den køre i loop, så slutningen matcher begyndelsen. At animere turbulensen live er tungt, så et kort eksporteret videoloop er som regel den bedste vej. Et loop på 8 til 15 sekunder giver hældningen tid nok til at bevæge sig, uden at nogen opdager gentagelsen, og en MP4 i 1080×1920 dækker stories, reels og telefonbaggrunde med én fil. [Animerede gradientbaggrunde](https://gradiently.design/da/guide/animated-gradient-background) gennemgår lettere metoder.
## Sådan sætter du ord på en flydende gradient
### Kæmper mod ordene
- Tynde bånd med høj kontrast bag overskriften
- Hvirvler overalt i samme tæthed
- Lille tekst over den travleste pøl
- Højlys, der krydser bogstaverne
### Bærer ordene
- Et bredt, roligt bånd, hvor strømmen sænker farten
- Travle hvirvler i kanterne, ro i midten
- Stor, tung skrift med få ord
- Højlys holdt væk fra teksten
Et opslag på højkant med det enkelte ord Hæld i stor skrift på en flydende gradient
Ét ord, tung skrift, sat på et roligt stykke farve.
Et kvadratisk musikcover med titlen Undertow på en hvirvlende, flydende gradientbaggrund
Et kvadratisk udgivelsescover. Flydende udtryk passer til musik, fordi de føles som lyd gjort synlig.
Marks i Gradiently er levende baggrunde, hvis materialer kan flyde og drive, og hver af dem flytter automatisk den roligste del af sin overflade om bag dine ord. Pro eksporterer dem som GIF, MP4 eller WebM, så et flydende udtryk kan blive til en story eller et hero-loop uden at bygge en shader. Læs [tekst på en gradient](https://gradiently.design/da/guide/text-on-gradient) for læsbarhedssiden.
## FAQ
### Hvordan laver jeg en flydende gradient?
Tegn farvestriber, og bøj dem med et warp-, twirl- eller liquify-værktøj, til de hvirvler. Tilføj tynde, lyse højlys langs et par kurver og lidt korn.
### Kan man lave en flydende gradient i CSS?
Mest med hjælp fra SVG. Læg et SVG-filter med `feTurbulence` og `feDisplacementMap` på en stribet CSS-gradient for at bøje den til et flydende mønster.
### Hvad er forskellen på en flydende gradient og en mesh-gradient?
En mesh-gradient blander farver jævnt hen over et gitter. En flydende gradient holder farverne som tydelige bånd, der krøller og strækkes, som hældt maling.
### Hvilke farver fungerer til en flydende gradient?
En mørk base, to stærke mellemfarver og en lys tone, der kun bruges i tynde bånd. Kontrasten mellem tykke mørke bånd og tynde lyse er det, der aflæses som væske.