Så får du en gradient att se bra ut: en kontroll i sju steg

Att veta hur man får en gradient att se bra ut handlar om sju kontroller, i ordning: färger som möts utan att bli grå, stopp som placeras ojämnt, ljus som kommer från en riktning, en grund som sätter stämningen, en nypa korn, ett lugnt utrymme för ord och en export som håller den mjuk. Var och en är ett snabbt test med en tydlig åtgärd. Nästan varje gradient som ser billig ut faller på minst två av dem, och att rätta till de två gör oftast mer än att byta färger helt.

1. Färger som möts rent

När två färger mitt emot varandra på hjulet blandas direkt faller mitten ner i grått. Blått till orange och grönt till rosa är de vanliga syndarna. Lägg antingen till en överbryggande färg emellan, så att blandningen färdas runt hjulet i stället för genom centrum, eller blanda i en perceptuell färgrymd. Leriga gradienter och gradientinterpolering förklarar båda.

2. Stopp placerade ojämnt

Jämnt fördelade färger läses som en ramp från en förinställning. I naturen dominerar oftast en färg och förändringen sker över en kort sträcka: en himmel är mest blå med ett smalt varmt band vid horisonten. Ge din huvudfärg 60 till 70 procent av bilden och låt de andra komma sent. Gradientens färgstopp går djupare in på placering och mittpunkter.

3. Ljus från en riktning

En bra gradient känns upplyst. Välj varifrån ljuset kommer, oftast ett övre hörn, och gör det området det klaraste och mest mättade. Allt annat faller bort från det. Om du inte kan peka ut ljuskällan känns gradienten platt oavsett vilka färger du använder. En mjuk radiell gradient lagd över en linjär är det snabbaste sättet att lägga till den.

4. En grund som sätter stämningen

Bestäm om designen är mörk eller ljus och håll fast vid det. En gradient som irrar från mellanviolett till mellanrosa har ingen grund, så den känns obestämd. En nästan svart bas får färgerna att glöda, ett varmt off-white får dem att kännas tryckta. Skjut basen längre än vad som känns bekvämt och ta sedan tillbaka den ett steg.

5. Korn: rätt brusförhållande

Helt jämna digitala gradienter visar ränder på många skärmar och ser ut som programvarans standardval. Ett fint brusskikt rättar till båda. Det användbara spannet är smalt: under cirka 2 procents opacitet ser du det inte, och över cirka 8 procent läses det som en medveten textur i stället för en finish. För mörka gradienter, börja på 3 procent, för bleka 5 procent, eftersom brus är svårare att se på ljusa färger.

.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;
}

Fler kornrecept finns i korniga gradienter och CSS-brustextur.

6. Ett lugnt utrymme för ord

De flesta gradienter finns för att bära ett budskap. Hitta var orden ska stå och se till att det området är det lugnaste och mest jämna i tonen, så att varje rad har samma kontrast. Den klaraste, stökigaste delen av gradienten hör hemma någon annanstans. Åtgärda aldrig dålig kontrast med ett sken bakom bokstäverna: flytta ljuset i stället.

Det här är kontrollen Gradiently gör åt dig. En Mark vet var dina ord finns: dess lugnaste område flyttas bakom texten, färger nära bokstäverna fördjupas eller lyfts och Auto-bläck väljer ljus eller mörk text för varje rad ur Markens egen palett.

7. En export som håller den mjuk

• Stillbilder: exportera PNG. JPEG-komprimering gör långa toner till steg, och sociala appar komprimerar igen vid uppladdning.
• Video: använd MP4 med hög bitrate i plattformens exakta storlek, så att inget skalas om.
• Storlek: exportera i plattformens egna mått, som 1080×1350 för ett Instagraminlägg, i stället för att låta appen beskära.
• Kontrollera i en mobil: titta på den uppladdade versionen, i ett mörkt rum, med full ljusstyrka. Där gömmer sig bandningen.

Om ränderna överlever allt det här har gradientbandning de djupare åtgärderna.