Slik bruker du en gradientgenerator uten å ligne alle andre

En gradientgenerator er et verktøy som bygger en gradient for deg: du velger farger eller lar dem være tilfeldige, setter en retning, og verktøyet eksporterer CSS-kode eller et bilde. Det er den raskeste veien til en pen overgang. Det er også grunnen til at så mange nettsteder, innlegg og presentasjoner deler de samme bakgrunnene fra lilla til rosa eller fra blått til cyan. Generatoren er ikke problemet. Å bruke det første svaret er det.

Denne guiden forklarer hvorfor generatorresultater nærmer seg hverandre, og går gjennom seks endringer som gjør et resultat til ditt. Til noen av dem trenger du det grunnleggende om lineære gradienter i CSS.

Hva en gradientgenerator faktisk gjør

De fleste generatorer gjør tre ting. De velger to eller flere farger, enten fra en fargevelger, et tilfeldig kast eller et bibliotek med populære paletter. De setter en type og en retning, som regel lineær i en vinkel. Og de skriver ut koden, typisk én enkelt linear-gradient()-verdi, noen ganger med eksport til PNG eller SVG. Noen nyere verktøy lager mesh- eller blob-gradienter, og noen tar imot en tekstbeskrivelse.

Hvorfor generatorresultater ser like ut

• To stopp som standard. Tofargede overganger er de enkleste å generere og de letteste å kjenne igjen som generiske.
• Samme vinkel. 135 grader, fra øverst til venstre til nederst til høyre, er en vanlig standard og passer nesten ikke til noe bestemt.
• Populære paletter. Biblioteker viser de mest kopierte kombinasjonene først, så de mest brukte gradientene blir brukt enda mer.
• Maksimal metning. Tilfeldige velgere og forhåndsinnstillinger heller mot livlige farger, som ser imponerende ut i et miniatyrbilde og harde ut bak tekst.
• Ingen materiale. En naken gradient er glatt, digital og flat. Nesten alle genererte gradienter har den samme finishen.

Ingenting av dette er feil i seg selv. Sammen gir det et uttrykk som tilhører alle, og det er det motsatte av hva en merkevare trenger. Gradient i merkevarebygging forklarer hvorfor det betyr mer enn smak.

Seks endringer som gjør en generert gradient til din

1. 1

   Start fra fargene dine

   Lim inn merkevarefargene dine, eller farger hentet fra et bilde du liker, i stedet for å trekke tilfeldige. Å hente en palett fra et bilde er en god kilde.

2. 2

   Legg til et tredje stopp og flytt det

   En beslektet mellomfarge på 40 % eller 60 %, ikke 50 %, gir overgangen en form. Overgangen heller nå, og det leses som lys og ikke som fyll.

3. 3

   Endre interpoleringen

   Å blande i OKLCH holder fargene livlige gjennom midten og unngår grå felt. Se OKLCH-gradienter.

4. 4

   Tilpass retningen til layouten

   Rett lyset dit innholdet er. Et vertikalt fall passer en historie; en lav horisont passer et banner; en radial glød passer et produktbilde.

5. 5

   Legg til korn eller et materiale

   Et fint støylag skjuler banding og gir overflaten struktur. Det er den raskeste veien fra digitalt til taktilt.

6. 6

   Beskjær, ikke bare fyll

   Bruk et utsnitt av en større gradient, eller skaler den opp så bare én myk overgang vises. Beskjæring endrer følelsen mer enn å bytte farger.

Fra generatorens utdata til produksjonskode

Generatorer eksporterer ofte mer enn du trenger, eller mindre. Sjekk koden før du limer den inn: moderne nettlesere trenger ikke lenger leverandørprefikser for gradienter, og det lønner seg å legge til en ensfarget reservefarge for de sjeldne tilfellene der gradienten ikke tegnes.

/* Edited generator output: solid fallback, own colours, OKLCH blend */
.hero {
  background-color: #1e2a5a;
  background-image: linear-gradient(in oklch 170deg, #1e2a5a 0%, #4f46e5 60%, #f0abfc 100%);
}

Skal gradienten brukes i e-post, som bilde i sosiale medier eller på trykk, eksporterer du et bilde i stedet for CSS. For bilder genererer du i endelig størrelse, legger til korn før eksport og lagrer som PNG for å unngå bånd fra komprimering.

Test før du publiserer

De fleste gradienter svikter på kontrast, ikke på farge. Sett den faktiske overskriften din på den, og sjekk den på det lyseste punktet bak teksten. Tekst på en gradient viser hvordan.

Når en generator ikke er nok

En generator gir deg farge. Den gir deg ikke en overflate med materiale, lys og bevegelse, og den kan ikke love at ingen andre bruker det samme resultatet. Vil du ha en gradient som tilhører deg, trenger du noe som sjekker den mot alle andres.

Slik fungerer Forge i Gradiently. Beskriv et uttrykk i en setning, eller bygg det kontroll for kontroll: opptil åtte farger, opptil tre stablede materialer, lys, korn og bevegelse. Før en ny Mark publiseres, sjekkes den mot alle andre Marks, og alt som ligger for nært, avvises. Resultatet tegnes direkte bak designene dine, og det kan ha nøyaktig én eier.

GR·M0K1·EJ

Veiled Salon

Se denne Marken