Kort fortalt
- 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.
På denne side
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.
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 og gradienter i Procreate 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.
<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>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 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
Ét ord, tung skrift, sat på et roligt stykke farve.
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 for læsbarhedssiden.
Spørgsmål, folk stiller
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.
Skrevet af Gradiently
Holdet bag Gradiently, et designværktøj bygget om Marks: levende gradienter, der får alt, du designer, til at ligne dig.
Se vores profil