Lav en gradientbaggrund, der ikke ligner alle andres

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.

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.

Vælger du mørkt, så læs mørke gradientbaggrunde 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.

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 sammenligner familierne, og kornede gradienter 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 for kontrastregler.

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

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å.

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

Til et heroafsnit frem for en hel side virker de samme lag på selve afsnittet. Hero-baggrunde til hjemmesider 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.