Så gör du en gradientbakgrund som inte ser generisk ut

För att göra en gradientbakgrund som inte ser generisk ut väljer du först en bottenfärg, lägger till tre till fem besläktade färger i stället för två, ger ytan ett material som korn eller mjukt ljus och håller ett lugnt område där orden ska sitta. De flesta gradientbakgrunder hoppar över varje ett av de stegen: de tar en tvåfärgad förinställning, låter den gå från hörn till hörn och slutar där. Därför ser så många av dem utbytbara ut.

Därför ser de flesta gradientbakgrunder likadana ut

Designverktyg, generatorer och mallar erbjuder alla samma korta lista av övergångar, och trender puffar alla mot samma nyanser samtidigt. Violett till rosa, blått till cyan och orange till magenta är behagliga, men de används så flitigt att de läses som en standard snarare än ett val. Det större mönstret förklaras i varför alla flöden ser likadana ut.

Steg 1: välj en botten

Bottnen är färgen gradienten vilar på och återvänder till. Den sätter stämningen mer än någon accent. En nästan svart botten får färg att glöda och känns premium och nattlig; en varm off-white botten känns tryckt, lugn och redaktionell. Välj en innan du väljer en enda accent, och behåll den för hela uppsättningen designer.

Om du väljer mörkt, läs mörka gradientbakgrunder innan du exporterar, eftersom mörka övergångar är där bandning syns mest.

Steg 2: välj tre till fem besläktade färger

Två färger är den lättaste gradienten att göra och den lättaste att kopiera. En liten familj ger djup: en skuggton, en huvudton, en lyftning och en accent som används sparsamt. Håll grannarna nära på färghjulet så att övergångarna förblir rena, och låt accenten sitta för sig. Motsatta färger placerade bredvid varandra blir gråa där de möts, vilket tas upp i grumliga gradienter.

Steg 3: ge den ett material

En ren digital övergång ser ut som en skärmstandard. Ett material får den att se ut som en yta. Korn läses som film eller tryck, pappersstruktur läses som hantverk, en glasig glans läses som teknik och mjukt siden läses som lyx. Du behöver inte mycket: ett brusskikt med låg opacitet räcker för att ändra känslan. Gradienttextur jämför familjerna, och korniga gradienter har koden.

Steg 4: planera var orden ska stå

En bakgrund finns för att bära något: en rubrik, ett pris, ett datum. Bestäm var de orden sitter innan du gör klart gradienten, och håll det området lugnare och med högre kontrast. Lägg den ljusaste, mest livliga färgen bort från texten, oftast i ett hörn, och låt bottnen synas bakom orden. För kontrastregler, se färgkontrast och tillgänglighet.

Steg 5: rendera den för varje format

En gradient som ser rätt ut som ett kvadratiskt inlägg kan se fel ut som en stående story, eftersom beskärning flyttar det ljusa området. Behandla bakgrunden som ett recept du renderar i varje storlek, där du justerar var ljuset hamnar, snarare än en enda bild du beskär.

Inlägg 1080×1350

1080 × 1350

Story 1080×1920

1080 × 1920

Webbplatsens hero 1920×1080

1920 × 1080

Bloggbanner 1200×600

1200 × 600

En gradientbakgrund i CSS

På webben har en gradient över hela sidan en klassisk bugg: om sidan är kort upprepas bakgrunden i band. Ge rotelementet en minimihöjd, ange en solid reservfärg som också syns vid överscrollning och lägg sedan gradienten ovanpå.

html {
  min-height: 100%;
  background-color: #0f0b1e; /* fallback, and the colour seen on overscroll */
}

body {
  min-height: 100vh;
  margin: 0;
  background-image:
    radial-gradient(circle at 80% 15%, #6d28d9 0%, transparent 45%),
    radial-gradient(circle at 10% 90%, #312e81 0%, transparent 50%),
    linear-gradient(160deg, #0f0b1e 0%, #1e1640 100%);
}

För en herosektion i stället för en hel sida fungerar samma lager på själva sektionen. Webbplatsens herobakgrunder tar upp storlekar och prestanda.

Äga din gradientbakgrund

Även en noggrant gjord bakgrund kan samplas och återanvändas. I Gradiently är en färdig bakgrund en Mark: ett recept av färger, material, ljus, korn och rörelse med exakt en ägare i taget. Den renderas i varje storlek du designar i och gör plats för dina ord av sig själv. Du kan designa med vilken Mark som helst gratis, och säkra en för att göra den till din.