Så använder du en gradientgenerator utan att se ut som alla andra

En gradientgenerator är ett verktyg som bygger en gradient åt dig: du väljer eller slumpar färger, anger en riktning och den exporterar CSS-kod eller en bild. Det är det snabbaste sättet att få en snygg övergång. Det är också varför så många webbplatser, inlägg och presentationer delar samma bakgrunder i lila till rosa eller blått till cyan. Generatorn är inte problemet. Att använda dess första svar är det.

Den här guiden förklarar varför generatorresultat konvergerar och går igenom sex ändringar som gör ett resultat till ditt. Du behöver grunderna i linjära gradienter i CSS för några av dem.

Vad en gradientgenerator egentligen gör

De flesta generatorer gör tre saker. De väljer två eller fler färger, antingen från en väljare, ett slumpkast eller ett bibliotek av populära paletter. De anger en typ och riktning, oftast linjär i en vinkel. Och de skriver ut koden, vanligtvis ett enda linear-gradient()-värde, ibland med en PNG- eller SVG-export. Några nyare verktyg gör mesh- eller blobgradienter, och några tar en textprompt.

Därför ser alla generatorresultat likadana ut

• Två stopp som standard. Tvåfärgsövergångar är de enklaste att generera och de lättaste att känna igen som generiska.
• Samma vinkel. 135 grader, uppe till vänster till nere till höger, är ett vanligt standardvärde och passar nästan ingenting särskilt.
• Populära paletter. Bibliotek visar de mest kopierade kombinationerna först, så de mest använda gradienterna används ännu mer.
• Maximal mättnad. Slumpväljare och förinställningar lutar mot starka färger, som ser imponerande ut i en miniatyr och hårda bakom text.
• Inget material. En bar gradient är jämn, digital och platt. Nästan varje genererad gradient delar den finishen.

Ingen av dem är fel i sig. Tillsammans ger de en look som tillhör alla, vilket är motsatsen till vad ett varumärke behöver. Gradient i varumärket förklarar varför det spelar roll bortom smak.

Sex ändringar som gör en genererad gradient till din

1. 1

   Utgå från dina färger

   Klistra in dina varumärkesfärger, eller färger hämtade från ett foto du gillar, i stället för att slumpa fram några. Att hämta en palett ur en bild är en bra källa.

2. 2

   Lägg till ett tredje stopp och flytta det

   En besläktad mellanfärg vid 40 % eller 60 %, inte 50 %, ger övergången en form. Övergången lutar nu, vilket läses som ljus snarare än en fyllning.

3. 3

   Ändra interpolationen

   Att blanda i OKLCH håller färgerna levande genom mitten och undviker grå fläckar. Se OKLCH-gradienter.

4. 4

   Anpassa riktningen till layouten

   Rikta ljuset dit innehållet finns. Ett lodrätt fall passar en story; en låg horisont passar en banner; en radiell glöd passar en produktbild.

5. 5

   Lägg till korn eller ett material

   Ett fint brusskikt döljer bandning och ger ytan struktur. Det är det snabbaste sättet från digitalt till taktilt.

6. 6

   Beskär, fyll inte bara

   Använd en del av en större gradient, eller skala upp den så att bara en mjuk övergång syns. Beskärning ändrar känslan mer än att byta färger.

Från generatorns utdata till produktionskod

Generatorer exporterar ofta mer än du behöver, eller mindre. Kontrollera koden innan du klistrar in den: moderna webbläsare behöver inte längre leverantörsprefix för gradienter, och det är värt att lägga till en solid reservfärg för det sällsynta fallet att gradienten inte renderas.

/* 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%);
}

Om gradienten ska användas i mejl, som en bild i sociala medier eller i tryck, exportera en bild i stället för CSS. För bilder, generera i slutlig storlek, lägg till korn före exporten och spara som PNG för att undvika komprimeringsband.

Testa innan du levererar

De flesta gradienter faller på kontrast, inte på färg. Lägg din faktiska rubrik på den och kontrollera den vid den ljusaste punkten bakom texten. Text på en gradient tar upp hur.

När en generator inte räcker

En generator ger dig färg. Den ger dig inte en yta med material, ljus och rörelse, och den kan inte lova att ingen annan använder samma resultat. Om du vill ha en gradient som tillhör dig behöver du något som kontrollerar den mot alla andras.

Så fungerar Gradiently Forge. Beskriv en look i en mening eller bygg den reglage för reglage: upp till åtta färger, upp till tre staplade material, ljus, korn och rörelse. Innan en ny Mark publiceras kontrolleras den mot varje annan Mark, och allt som ligger för nära nekas. Resultatet renderas live bakom dina designer och kan ha exakt en ägare.

GR·M0K1·EJ

Veiled Salon

Se den här Marken