# Lav en gradientbaggrund, der ikke ligner alle andres [Canonical HTML page](https://gradiently.design/da/guide/gradient-background) De fleste gradientbaggrunde ligner hinanden, fordi de starter fra de samme få forudindstillinger. Her er en metode i fem trin til et gennemtænkt udtryk med koder, du kan kopiere. ## The short version - En god gradientbaggrund starter med en bundfarve, en lille familie på tre til fem beslægtede farver, et materiale eller en tekstur og planlagt plads til ord. - De fleste gradientbaggrunde virker generiske, fordi de er forudindstillinger med to farver i de samme populære kulører blandet langs en lige diagonal. - En mørk eller lys bund bestemmer stemningen mere end nogen enkelt farve, så vælg den først. - Lidt korn skjuler farvebånd og får en digital gradient til at føles som en overflade frem for en skærmstandard. - Render baggrunden til hvert format frem for at beskære ét billede, så det lyseste område altid lander, hvor designet har brug for det. Lav en **gradientbaggrund**, der ikke ligner alle andres, ved først at vælge en bundfarve, tilføje tre til fem beslægtede farver frem for to, give overfladen et materiale som korn eller blødt lys og holde et roligt område til ordene. De fleste gradientbaggrunde springer alle trinene over: de tager en forudindstilling med to farver, lader den gå fra hjørne til hjørne og stopper der. Derfor virker så mange udskiftelige. ## Derfor ligner de fleste gradientbaggrunde hinanden Designværktøjer, generatorer og skabeloner tilbyder alle den samme korte liste med blandinger, og trends skubber alle mod de samme kulører på samme tid. Violet til lyserød, blå til cyan og orange til magenta er behagelige, men bruges så bredt, at de virker som standardvalg frem for beslutninger. Det større mønster forklares i [derfor ligner alle feeds hinanden](https://gradiently.design/da/guide/why-every-feed-looks-the-same). ### Generisk - To mættede farver fra en forudindstilling - En lige diagonal på 45 grader - Helt ren digital overflade - Jævnt fordelt farve uden plads til ord - Ét billede strakt til alle størrelser ### Gennemtænkt - En bund plus en familie på tre til fem farver - Lys, der kommer fra et bestemt sted - Korn, papir eller glans på overfladen - En rolig zone planlagt til overskriften - Renderet på ny til hvert format ## Trin 1: vælg en bund Bunden er den farve, gradienten ligger på og vender tilbage til. Den sætter stemningen mere end nogen accent. En næsten sort bund får farver til at gløde og føles eksklusiv og natlig. En varm, knækket hvid bund føles trykt, rolig og redaktionel. Vælg den før en eneste accent, og behold den gennem hele designserien. - Mørk bund, violet lys: `radial-gradient(circle at 75% 20%, #7c3aed 0%, #2e1065 35%, #0c0a1d 75%)` - Papirbund, ferskenlys: `radial-gradient(circle at 25% 25%, #fed7aa 0%, #fdf2e9 45%, #f7f1ea 80%)` - Dyb grøn bund, blågrønt lys: `radial-gradient(circle at 70% 80%, #0d9488 0%, #134e4a 40%, #071a1a 80%)` Tre bunde med én belyst farve hver. Bunden gør det meste af arbejdet. Accenten skal bare gløde. Vælger du mørkt, så læs [mørke gradientbaggrunde](https://gradiently.design/da/guide/dark-gradient-backgrounds) før eksport, fordi farvebånd ses tydeligst i mørke blandinger. ## Trin 2: vælg tre til fem beslægtede farver En gradient med to farver er lettest at lave og lettest at kopiere. En lille familie giver dybde: en skyggetone, en hovedtone, en lysere tone og én accent brugt sparsomt. Hold nabofarver tæt på hinanden på farvehjulet, så blandingerne forbliver rene, og lad accenten stå for sig. Modsatte farver side om side bliver grå, hvor de mødes, som beskrevet i [mudrede gradienter](https://gradiently.design/da/guide/muddy-gradients). - Blækfarvet bund: #0f0b1e - Indigoskygge: #312e81 - Violet hovedfarve: #6d28d9 - Lys syren: #c084fc - Glødende accent: #fb923c En bund, tre beslægtede violette og én varm accent. Gløden optræder kun ét lille sted, og netop derfor bliver den bemærket. ## Trin 3: giv den et materiale En ren digital blanding ligner en skærmstandard. Et materiale gør den til en overflade. Korn opleves som film eller tryk, papirstruktur som håndværk, glasagtig glans som teknologi og blød silke som luksus. Der skal ikke meget til: et støjlag med lav opacitet er nok til at ændre følelsen. [Gradienttekstur](https://gradiently.design/da/guide/gradient-texture) sammenligner familierne, og [kornede gradienter](https://gradiently.design/da/guide/grainy-gradients) har koden. ## Trin 4: planlæg ordenes placering En baggrund skal bære noget: en overskrift, en pris, en dato. Beslut, hvor ordene skal stå, før du færdiggør gradienten, og hold området roligere og med højere kontrast. Placér den lyseste, mest urolige farve væk fra teksten, typisk i et hjørne, og lad bunden vise sig bag ordene. Se [farvekontrast og tilgængelighed](https://gradiently.design/da/guide/color-contrast-accessibility) for kontrastregler. Et eventopslag, hvor overskriften ligger på gradientens lyseste område og er svær at læse Jævnt fordelt farve betyder, at det lyseste område kan lande lige bag ordene. Samme eventopslag med et roligere, mørkere område af gradienten bag overskriften Med en rolig zone bag teksten bærer samme baggrund budskabet. ## Trin 5: render til hvert format En gradient, der ser rigtig ud som kvadratisk opslag, kan virke forkert som lodret story, fordi beskæringen flytter det lyse område. Betragt baggrunden som en opskrift, du renderer i hver størrelse og justerer lysets placering i, frem for ét billede, du beskærer. - Opslag 1080×1350: 1080 × 1350 - Story 1080×1920: 1080 × 1920 - Hjemmeside-hero 1920×1080: 1920 × 1080 - Blogbanner 1200×600: 1200 × 600 Fire almindelige baggrundsstørrelser. Lyset skal lande fornuftigt i hver af dem, ikke blot dér, hvor en beskæring efterlader det. ## En gradientbaggrund i CSS På nettet har en gradient over hele siden én klassisk fejl: hvis siden er kort, gentages baggrunden i bånd. Giv rodelementet en minimumshøjde, angiv en ensfarvet reserve, som også vises, når man ruller ud over kanten, og læg så gradienten ovenpå. ```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 bund, violet lys fra øverst til højre og en indigoskygge nederst til venstre. Afslut med et kornlag ovenpå. Til et heroafsnit frem for en hel side virker de samme lag på selve afsnittet. [Hero-baggrunde til hjemmesider](https://gradiently.design/da/guide/website-hero-background) gennemgår størrelse og ydeevne. ## Ej din gradientbaggrund Selv en omhyggeligt lavet baggrund kan aflæses og genbruges. I Gradiently er en færdig baggrund en Mark: en opskrift af farver, materialer, lys, korn og bevægelse med præcis én ejer ad gangen. Den renderes i hver størrelse, du designer i, og giver selv plads til dine ord. Du kan designe med enhver Mark gratis og sikre dig en for at gøre den til din. ## FAQ ### Hvordan får jeg en gradientbaggrund til at virke mindre generisk? Start med en bundfarve, brug tre til fem beslægtede farver frem for to, tilføj korn eller et andet materiale, og planlæg et roligt område til ord. ### Hvilke farver giver en god gradientbaggrund? Farver tæt på hinanden på farvehjulet blandes rent. Tilføj én kontrasterende accent i et lille område for at skabe interesse. ### Hvorfor gentages min CSS-gradientbaggrund i striber ned ad siden? Rodelementet er kortere end vinduet, så gradienten gentages. Sæt `min-height: 100%` på `html` og `min-height: 100vh` på `body`. ### Skal en gradientbaggrund være mørk eller lys? Begge dele virker. Mørke bunde får farver til at gløde og føles eksklusive. Lyse bunde føles trykte og rolige. Vælg én retning, og hold den ensartet. ### Hvordan undgår jeg farvebånd i en gradientbaggrund? Tilføj et let kornlag, og undgå hård JPEG-komprimering. Mørke og diskrete gradienter får flest farvebånd.