Kortversjonen
- 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.
På denne siden
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.
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 og Procreate-gradienter 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.
<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å 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 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
Ett ord i tung skrift, på et rolig fargestykke.
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 om lesbarheten.
Spørsmål folk stiller
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.
Skrevet av Gradiently
Teamet bak Gradiently, et designverktøy bygget rundt Marks: levende gradienter som gjør at alt du designer ser ut som ditt.
Se profilen vår