Kortversjonen
- En gradient ser bra ut når fargene møtes uten å bli grå, stoppene ligger ujevnt og lyset ser ut til å komme fra ett sted.
- Grå eller grumsete midtpartier oppstår når motsatte farger blandes direkte. En brofarge eller blanding i OKLCH løser det.
- Litt korn, rundt 2 til 6 prosent opasitet, skjuler bånd og får en digital gradient til å føles som en overflate.
- En god gradient gir alltid plass til et rolig område der ord får sterk kontrast.
- Eksporter gradienter som PNG eller video med høy kvalitet fremfor komprimert JPEG, som lager synlige striper.
På denne siden
Å vite hvordan du lager en pen gradient, handler om sju sjekker i rekkefølge: farger som møtes uten å bli grå, ujevnt plasserte stopp, lys fra én retning, en grunnfarge som setter stemningen, litt korn, rolig plass til ord og en eksport som bevarer jevnheten. Hver er en rask test med en tydelig løsning. Nesten alle gradienter som virker billige, svikter på minst to punkter. Å rette de to gjør vanligvis mer enn å bytte alle fargene.
Testen
Hvis den svikter
Testen
Hvis den svikter
Testen
Hvis den svikter
Testen
Hvis den svikter
Hvis den svikter
Testen
Hvis den svikter
Testen
Hvis den svikter
1. Farger som møtes rent
Når to farger på hver sin side av fargesirkelen blandes direkte, blir midten grå. Blått til oransje og grønt til rosa er vanlige syndere. Legg til en brofarge mellom dem så blandingen går rundt sirkelen fremfor gjennom sentrum, eller bland i et perseptuelt fargerom. Grumsete gradienter og gradientinterpolasjon forklarer begge.
2. Ujevnt plasserte stopp
Jevnt fordelte farger virker som en forhåndsinnstilling. I naturen dominerer vanligvis én farge, og endringen skjer over et kort stykke: himmelen er mest blå med et smalt varmt bånd ved horisonten. Gi hovedfargen 60 til 70 prosent av bildet, og la de andre komme sent. Fargestopp i gradienter går grundigere inn i plassering og hint.
3. Lys fra én retning
En god gradient føles belyst. Velg hvor lyset kommer fra, vanligvis et øvre hjørne, og gjør det området lysest og mest mettet. Alt annet avtar derfra. Hvis du ikke kan peke på lyskilden, føles gradienten flat uansett farger. En myk radiell gradient over en lineær er den raskeste måten å legge til lys på.
4. En grunnfarge som setter stemningen
Bestem om designet er mørkt eller lyst, og gjennomfør det. En gradient som vandrer fra mellomfiolett til mellomrosa, mangler en tydelig bunn og virker ubesluttsom. En nesten svart bunn får fargene til å gløde; en varm offwhite gjør at de føles trykt. Skyv bunnen lenger enn det virker behagelig, og trekk den så ett trinn tilbake.
5. Korn: riktig mengde støy
Helt jevne digitale gradienter viser striper på mange skjermer og ligner programvarens standardvalg. Et fint støylag løser begge deler. Det nyttige intervallet er smalt: under omtrent 2 prosent opasitet ser du det ikke, og over omtrent 8 prosent fremstår det som bevisst tekstur fremfor finish. På mørke gradienter begynner du med 3 prosent; på lyse med 5 prosent, fordi støy er vanskeligere å se på lyse farger.
.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 kornoppskrifter finnes i kornete gradienter og støytekstur i CSS.
6. Rolig plass til ord
De fleste gradienter skal bære et budskap. Finn hvor ordene skal stå, og sørg for at området er roligst og jevnest i tone, så hver linje har samme kontrast. Den lyseste og travleste delen hører hjemme et annet sted. Rett aldri dårlig kontrast med glød bak bokstavene: flytt heller lyset.
Svikter på sjekk 6: fargen går rett gjennom ordene.
Består: området bak teksten er roligere, og alle linjene kan leses.
Denne sjekken gjør Gradiently for deg. En Mark vet hvor ordene dine er: det roligste området flytter seg bak teksten, farger nær bokstavene mørkner eller lysner, og Auto-tekstfarge velger lys eller mørk skrift for hver linje fra Markens egen palett.
7. Eksport som bevarer jevnheten
- Stillbilder: eksporter PNG. JPEG-komprimering gjør lange overganger til trinn, og sosiale apper komprimerer på nytt ved opplasting.
- Video: bruk MP4 med høy bitrate i plattformens nøyaktige størrelse, så ingenting skaleres om.
- Størrelse: eksporter i plattformens egne mål, som 1080×1350 til et Instagram-innlegg, fremfor å la appen beskjære.
- Sjekk på mobilen: se på den opplastede versjonen i et mørkt rom med full lysstyrke. Det er der båndene skjuler seg.
Hvis stripene fortsatt er synlige, har bånddannelse i gradienter grundigere løsninger.
Spørsmål folk stiller
Hvordan får jeg en gradient til å se bra ut?
Bruk farger som blandes uten å bli grå, plasser stoppene ujevnt, lyssett fra én retning, velg en tydelig mørk eller lys bunn, legg til litt korn og gi ordene et rolig område.
Hvor mye støy bør jeg legge til en gradient?
Vanligvis 2 til 6 prosent opasitet. Begynn rundt 3 prosent på mørke gradienter og 5 prosent på lyse, og stopp så snart stripene forsvinner.
Hvorfor er gradienten min grumsete?
To motsatte farger blandes gjennom grått. Legg til en brofarge mellom dem eller bland i OKLCH.
Hvorfor virker gradienten min billig?
Den har antakelig to jevnt fordelte farger i 45 graders vinkel uten korn. Dette er standardvalg i de fleste verktøy og virker derfor lite gjennomtenkt.
Hvilket filformat er best for gradienter?
PNG til stillbilder og MP4 med høy bitrate til video. Komprimert JPEG viser bånd i lange, jevne overganger.
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