Sådan får du en gradient til at se godt ud: et tjek i syv punkter

At vide, hvordan du får en gradient til at se godt ud, handler om syv tjek i rækkefølge: farver, der mødes uden at blive grå, stop placeret ujævnt, lys fra én retning, en bund, der sætter stemningen, et strejf af korn, et roligt sted til ord og en eksport, der holder den glat. Hvert er en hurtig test med en klar løsning. Næsten hver gradient, der ser billig ud, dumper i mindst to af dem, og at rette de to gør som regel mere end at skifte farverne helt ud.

1. Farver, der mødes rent

Når to farver, der står over for hinanden i farvecirklen, blandes direkte, falder midten ned i grå. Blå til orange og grøn til pink er de sædvanlige syndere. Tilføj enten en brofarve imellem dem, så blandingen rejser rundt om cirklen i stedet for gennem centrum, eller bland i et perceptuelt farverum. Mudrede gradienter og interpolation i gradienter forklarer begge dele.

2. Stop placeret ujævnt

Jævnt fordelte farver læses som en rampe fra en forudindstilling. I naturen dominerer én farve som regel, og skiftet sker over en kort strækning: en himmel er for det meste blå med et smalt varmt bånd ved horisonten. Giv din hovedfarve 60 til 70 procent af billedet, og lad de andre komme sent. Farvestop i gradienter går dybere ind i placering og hints.

3. Lys fra én retning

En god gradient føles belyst. Vælg, hvor lyset kommer fra, som regel et øverste hjørne, og gør det område til det lyseste og mest mættede. Alt andet falder væk fra det. Kan du ikke pege på lyskilden, vil gradienten føles flad, uanset hvilke farver du bruger. En blød radial gradient lagt over en lineær er den hurtigste måde at tilføje den på.

4. En bund, der sætter stemningen

Bestem, om designet er mørkt eller lyst, og hold fast i det. En gradient, der vandrer fra mellemviolet til mellempink, har ingen bund, så den føles ubeslutsom. En næsten sort base får farverne til at gløde; en varm, brudt hvid får dem til at føles trykte. Skub basen længere, end det føles behageligt, og træk den så ét trin tilbage.

5. Korn: den rigtige mængde støj

Helt glatte digitale gradienter viser striber på mange skærme, og de ligner softwarens standardindstillinger. Et fint støjlag løser begge dele. Det brugbare spænd er smalt: under cirka 2 procent opacitet kan du ikke se det, og over cirka 8 procent læses det som en bevidst tekstur frem for en finish. Til mørke gradienter starter du ved 3 procent; til blege ved 5 procent, fordi støj er sværere at se på lyse farver.

.gradient {
  position: relative;
  background: radial-gradient(circle at 80% 20%, #ec4899 0%, #6d28d9 30%, #1e0b3a 65%, #0c0618 100%);
}

.gradient::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.04;
  mix-blend-mode: overlay;
  pointer-events: none;
}

Flere opskrifter på korn finder du i kornede gradienter og CSS-støjtekstur.

6. Et roligt sted til ord

De fleste gradienter findes for at bære et budskab. Find ud af, hvor ordene skal stå, og sørg for, at det område er det roligste og mest ensartede i tone, så hver linje har samme kontrast. Den lyseste, travleste del af gradienten hører til et andet sted. Ret aldrig dårlig kontrast med en glød bag bogstaverne: flyt lyset i stedet.

Det er det tjek, Gradiently laver for dig. En Mark ved, hvor dine ord står: dens roligste område flytter ind bag teksten, farverne nær bogstaverne bliver dybere eller lysere, og Automatisk tekstfarve vælger lys eller mørk skrift til hver linje ud fra Markens egen palet.

7. En eksport, der holder den glat

• Stillbilleder: eksportér PNG. JPEG-komprimering gør lange overgange til trin, og sociale apps komprimerer igen ved upload.
• Video: brug en MP4 med høj bitrate i platformens præcise størrelse, så intet bliver skaleret om.
• Størrelse: eksportér i platformens egne mål, som 1080×1350 til et Instagram-opslag, i stedet for at lade appen beskære.
• Tjek på en telefon: se på den uploadede udgave, i et mørkt rum, med fuld lysstyrke. Det er dér, banding gemmer sig.

Overlever striberne alt dette, har banding i gradienter de dybere løsninger.