Slik lager du en gradientbakgrunn som ikke ser generisk ut

For å lage en gradientbakgrunn som ikke ser generisk ut, velger du først en bunnfarge, legger til tre til fem beslektede farger i stedet for to, gir overflaten et materiale som korn eller mykt lys, og beholder et rolig område der ordene skal stå. De fleste gradientbakgrunner hopper over hvert eneste av de stegene: de tar en tofarget forhåndsinnstilling, kjører den fra hjørne til hjørne og stopper der. Det er derfor så mange av dem kan byttes ut med hverandre.

Hvorfor de fleste gradientbakgrunner ser like ut

Designverktøy, generatorer og maler tilbyr alle den samme korte listen med overganger, og trender dytter alle mot de samme fargetonene i samme øyeblikk. Fiolett til rosa, blått til cyan og oransje til magenta er behagelige, men de brukes så mye at de leses som en standard og ikke som et valg. Det større mønsteret forklares i hvorfor alle feeder ser like ut.

Steg 1: velg en bunn

Bunnen er fargen gradienten ligger på og vender tilbake til. Den setter stemningen mer enn noen aksent. En nesten svart bunn får farger til å gløde og føles eksklusiv og nattlig; en varm, off-white bunn føles trykt, rolig og redaksjonell. Velg én før du velger en eneste aksent, og behold den gjennom hele settet med design.

Velger du mørkt, bør du lese mørke gradientbakgrunner før du eksporterer, for det er i mørke overganger banding vises mest.

Steg 2: velg tre til fem beslektede farger

To farger er den enkleste gradienten å lage og den enkleste å kopiere. En liten familie gir dybde: en skyggetone, en hovedtone, et løft og én aksent som brukes sparsomt. Hold naboene tett på fargesirkelen så overgangene blir rene, og la aksenten stå for seg selv. Motsatte farger side om side blir grå der de møtes, noe som dekkes i grumsete gradienter.

Steg 3: gi den et materiale

En ren digital overgang ser ut som en skjermstandard. Et materiale får den til å se ut som en overflate. Korn leses som film eller trykk, papirstruktur leses som håndverk, en glassaktig glans leses som teknologi og myk silke leses som luksus. Du trenger ikke mye: et støylag med lav opasitet er nok til å endre følelsen. Gradienttekstur sammenligner familiene, og kornete gradienter har koden.

Steg 4: planlegg hvor ordene skal stå

En bakgrunn finnes for å bære noe: en overskrift, en pris, en dato. Bestem hvor de ordene skal stå før du gjør ferdig gradienten, og hold det området roligere og med høyere kontrast. Legg den lyseste, travleste fargen unna teksten, som regel i et hjørne, og la bunnen vises bak ordene. Reglene for kontrast finner du i fargekontrast og tilgjengelighet.

Steg 5: tegn den for hvert format

En gradient som ser riktig ut som et kvadratisk innlegg, kan se feil ut som en stående historie, fordi beskjæring flytter det lyse området. Behandle bakgrunnen som en oppskrift du tegner i hver størrelse, der du justerer hvor lyset lander, i stedet for ett bilde du beskjærer.

Innlegg 1080×1350

1080 × 1350

Historie 1080×1920

1080 × 1920

Nettsted-hero 1920×1080

1920 × 1080

Bloggbanner 1200×600

1200 × 600

En gradientbakgrunn i CSS

På nettet har en gradient over hele siden én klassisk feil: hvis siden er kort, gjentas bakgrunnen i bånd. Gi rotelementet en minstehøyde, sett en ensfarget reservefarge som også vises ved overrulling, og legg så gradienten oppå.

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

For en hero-seksjon i stedet for en hel side fungerer de samme lagene på selve seksjonen. Hero-bakgrunner for nettsteder går gjennom størrelser og ytelse.

Å eie gradientbakgrunnen din

Selv en omhyggelig laget bakgrunn kan plukkes opp og brukes av andre. I Gradiently er en ferdig bakgrunn en Mark: en oppskrift på farger, materialer, lys, korn og bevegelse med nøyaktig én eier om gangen. Den tegnes i hver størrelse du designer i, og gjør plass til ordene dine av seg selv. Du kan designe med hvilken som helst Mark gratis, og sikre deg en for å gjøre den til din.