# Så gör du en gradientbakgrund som inte ser generisk ut [Canonical HTML page](https://gradiently.design/sv/guide/gradient-background) De flesta gradientbakgrunder ser likadana ut eftersom de utgår från samma få förinställningar. Här är en metod i fem steg för att göra en som ser genomtänkt ut, med koder du kan kopiera. ## The short version - En bra gradientbakgrund börjar med en bottenfärg, en liten familj av tre till fem besläktade färger, ett material eller en textur och en planerad plats för ord. - De flesta gradientbakgrunder ser generiska ut eftersom de är tvåfärgade förinställningar i samma populära nyanser, blandade i en rak diagonal. - En mörk eller ljus botten avgör stämningen mer än någon enskild färg, så välj den först. - Lite korn döljer bandning och får en digital gradient att kännas som en yta i stället för en skärmstandard. - Rendera bakgrunden för varje format i stället för att beskära en bild, så att det ljusaste området alltid hamnar där designen behöver det. 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](https://gradiently.design/sv/guide/why-every-feed-looks-the-same). ### Generisk - Två mättade färger från en förinställning - En rak diagonal på 45 grader - En perfekt ren digital yta - Färgen jämnt utspridd, ingen plats för ord - En bild utsträckt till varje storlek ### Genomtänkt - En botten plus en familj på tre till fem färger - Ljus som kommer någonstans ifrån - Korn, papper eller glans på ytan - En lugn zon planerad för rubriken - Renderad på nytt för varje format ## 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. - Mörk botten, violett ljus: `radial-gradient(circle at 75% 20%, #7c3aed 0%, #2e1065 35%, #0c0a1d 75%)` - Pappersbotten, persikoljus: `radial-gradient(circle at 25% 25%, #fed7aa 0%, #fdf2e9 45%, #f7f1ea 80%)` - Djupgrön botten, turkost ljus: `radial-gradient(circle at 70% 80%, #0d9488 0%, #134e4a 40%, #071a1a 80%)` Tre bottnar med en upplyst färg var. Bottnen gör det mesta av jobbet; accenten behöver bara glöda. Om du väljer mörkt, läs [mörka gradientbakgrunder](https://gradiently.design/sv/guide/dark-gradient-backgrounds) 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](https://gradiently.design/sv/guide/muddy-gradients). - Bläckbotten: #0f0b1e - Indigoskugga: #312e81 - Violett huvudton: #6d28d9 - Lila lyft: #c084fc - Glödaccent: #fb923c En botten, tre sammanhängande violetta toner och en varm accent. Glöden syns bara på ett litet ställe, vilket är precis varför den märks. ## 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](https://gradiently.design/sv/guide/gradient-texture) jämför familjerna, och [korniga gradienter](https://gradiently.design/sv/guide/grainy-gradients) 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](https://gradiently.design/sv/guide/color-contrast-accessibility). Ett eventinlägg där rubriken ligger på gradientens ljusaste område och är svår att läsa Jämnt utspridd färg betyder att den ljusaste delen kan hamna precis bakom orden. Samma eventinlägg med ett lugnare, mörkare område av gradienten bakom rubriken Med en lugn zon bakom texten bär samma bakgrund budskapet. ## 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 Fyra vanliga bakgrundsstorlekar. Ljuset ska hamna på ett vettigt ställe i var och en, inte där en beskärning råkar lämna det. ## 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å. ```css 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%); } ``` En mörk botten, ett violett ljus uppe till höger och en indigoskugga nere till vänster. Lägg ett kornskikt ovanpå för att göra den färdig. För en herosektion i stället för en hel sida fungerar samma lager på själva sektionen. [Webbplatsens herobakgrunder](https://gradiently.design/sv/guide/website-hero-background) 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. ## FAQ ### Hur får jag en gradientbakgrund att se mindre generisk ut? Börja med en bottenfärg, använd tre till fem besläktade färger i stället för två, lägg till korn eller ett annat material och planera ett lugnt område för ord. ### Vilka färger ger en bra gradientbakgrund? Färger som ligger nära varandra på färghjulet blandas rent. Lägg till en kontrasterande accent på en liten yta för intresse. ### Varför upprepas min CSS-gradientbakgrund i ränder nedför sidan? Rotelementet är kortare än fönstret, så gradienten upprepas som plattor. Ange `min-height: 100%` på `html` och `min-height: 100vh` på `body`. ### Ska en gradientbakgrund vara mörk eller ljus? Båda fungerar. Mörka bottnar får färg att glöda och känns premium; ljusa bottnar känns tryckta och lugna. Välj en och håll den konsekvent. ### Hur stoppar jag bandning i en gradientbakgrund? Lägg till ett lätt kornskikt och undvik hård JPEG-komprimering. Mörka och subtila gradienter får mest bandning.