# Gradientdesign: 25 ideer for innlegg, presentasjoner og merkevarer

[Canonical HTML page](https://gradiently.design/nb/guide/gradient-design-ideas)

Godt gradientdesign starter med en idé om hva fargen gjør, ikke med en forhåndsinnstilling. Her er tjuefem slike ideer, gruppert etter hvor du skal bruke dem.

## The short version

- Gradientdesign fungerer best når gradienten har en jobb: å peke på noe, skille seksjoner, bære en stemning eller markere en merkevare.
- For innlegg i sosiale medier kombinerer de sterkeste gradientideene en kort tekstlinje med et rolig, opplyst område av feltet.
- For presentasjoner gir en gradient som skifter gradvis gjennom lysbildene, struktur uten å legge pynt på hver side.
- For merkevarer er én konsekvent gradient med en flat reservefarge mer nyttig enn en egen gradient for hver kanal.
- På nettet er gradienter billige å tegne i CSS og fungerer godt til glød i heroer, kanter og ett enkelt uthevet ord.

**Gradientdesign** er å bruke fargeoverganger som en strukturell del av en layout, ikke bare som bakgrunnsfyll. Ideene nedenfor gir gradienten en jobb hver: å peke, å skille, å sette en stemning eller å bli gjenkjent. De er gruppert etter hvor du skal bruke dem, innlegg, presentasjoner, merkevarer og nettet, og hver kommer med layouten eller koden du trenger for å prøve den.

Trenger du farger først, kan du starte med [fargekombinasjoner for gradienter](https://gradiently.design/nb/guide/gradient-color-combinations) og komme tilbake for å bestemme hva du skal gjøre med dem.

## Ideer til gradientdesign for innlegg i sosiale medier

1. **Overskrift i spotlight.** Én kort linje på det lyseste området av en [radial glød](https://gradiently.design/nb/guide/radial-gradient). Lyset forteller folk hvor de skal lese.
2. **Plakat med ett ord.** Ett enkelt stort ord på et rikt felt. Det fungerer bare hvis ordet fortjener plassen, så velg et verb eller et navn.
3. **Delt felt.** To gradienter som møtes i en hard kant, én for overskriften og én for detaljene. Kanten blir en linje i layouten.
4. **Tallkort.** Et stort tall på en rolig gradient med en forklaring på én linje. Hold feltet stille, så tallet dominerer.

Et stående innlegg med en kort overskrift over det lyseste området av en gradient

Idé 1: en overskrift i spotlight på den opplyste delen av feltet.

Et stående innlegg med det ene ordet Sakte satt stort på en gradient

Idé 2: ett ord, ett felt, ingenting annet.

Delt felt: `linear-gradient(90deg, #1e1b4b 0%, #4338ca 50%, #fb7185 50%, #fed7aa 100%)`

Idé 3: to overganger med et hardt stopp på 50 %. Legg overskriften på den mørke halvdelen og detaljene på den lyse.

1. **Spørsmålsinnlegg.** Et spørsmål som overskrift, med svaret lovet i bildeteksten. Gradienter passer til dette fordi de føles åpne og ikke ferdige.
2. **Sitat på et mykt felt.** Et kort sitat på en gradient med lav kontrast, med liten kildeangivelse. Mykhet leses som gjennomtenkt; hard farge slåss med ordene.
3. **Nedtellingsserie.** Den samme gradienten, flyttet noen grader varmere hver dag fram til lanseringen. Serien ser planlagt ut, og endringen bygger forventning.
4. **Duotone-bilde.** Et bilde tilordnet de to endefargene i gradienten din, så fotografi og bakgrunn hører sammen. Se [duotone](https://gradiently.design/nb/guide/duotone-effect).

- Dag 3: kjølig: `linear-gradient(160deg, #0f172a 0%, #3730a3 60%, #818cf8 100%)`
- Dag 2: varmere: `linear-gradient(160deg, #1a1433 0%, #6d28d9 60%, #c084fc 100%)`
- Dag 1: varmest: `linear-gradient(160deg, #2a0f24 0%, #be185d 60%, #fda4af 100%)`
- Lansering: full varme: `linear-gradient(160deg, #3b0d0c 0%, #ea580c 60%, #fde68a 100%)`

Idé 7: en nedtelling som går fra kjølig til varm. Samme struktur, samme vinkel, bare fargetonen endres.

## Ideer til gradientdesign for presentasjoner

1. **Tittelbilde med horisont.** En mørk topp som toner ut mot et opplyst bånd nær bunnen, med tittelen rett over. Det leses som en soloppgang og gir foredraget en begynnelse.
2. **Seksjonsskiller i rekkefølge.** Hvert seksjonsskille tar neste steg på én reise gjennom fargetonene. Folk vet hvor langt de har kommet, uten en framdriftslinje.
3. **Stille datalysbilder.** Lysbilder med innhold og diagrammer bruker en nesten flat versjon av samme gradient, så dataene bærer fargen. [Bakgrunner til presentasjoner](https://gradiently.design/nb/guide/presentation-backgrounds) går gjennom kontrast for tekst.
4. **Speilvendt sluttbilde.** Det siste lysbildet snur gradienten fra tittelbildet, topp mot bunn. Det lukker sirkelen visuelt.
5. **Lyst til mørkt.** Start lyst og slutt mørkt, eller omvendt, hvis foredraget går fra problem til svar. Fargen støtter historien i det stille.
6. **Ramme, ikke fyll.** En tynn gradientkant rundt et nøytralt innholdsområde holder et tett lysbilde leselig og er fortsatt i tråd med merkevaren.

Et tittelbilde i bredformat med en overskrift over et glødende fargebånd

Idé 9: et tittelbilde der lyset samler seg lavt i bildet, under tittelen.

- Seksjon 1: `linear-gradient(135deg, #082f49 0%, #0e7490 100%)`
- Seksjon 2: `linear-gradient(135deg, #064e3b 0%, #059669 100%)`
- Seksjon 3: `linear-gradient(135deg, #365314 0%, #a3e635 100%)`
- Seksjon 4: `linear-gradient(135deg, #713f12 0%, #facc15 100%)`

Idé 10: seksjonsskiller som vandrer langs nabofargetoner, fra blågrønt til gull. Mer i [design av pitch deck](https://gradiently.design/nb/guide/pitch-deck-design).

## Ideer til gradientdesign for merkevarer

1. **Én signaturgradient og en reservefarge.** Velg én overgang og én flat farge fra den til favikoner og enfarget trykk.
2. **En familie for produktlinjer.** Behold strukturen og vinkelen, og gi hver linje sin egen fargetone. Familien forblir gjenkjennelig mens hvert produkt er tydelig sitt eget.
3. **Gradient bare bak logoen.** Bruk gradienten på ett sted, logooppsettet eller appikonet, og flat farge ellers. Knapphet gjør den minneverdig.
4. **Sesongskifter.** Flytt den samme gradienten litt varmere om sommeren og kjøligere om vinteren, uten å endre strukturen.
5. **Gradient som materiale.** Legg til korn, silkeglans eller papirstruktur, så gradienten føles som en overflate. Tekstur er vanskeligere å kopiere enn farge.
6. **Trykksaker.** Ta med gradienten over på kort, klistremerker og emballasje, planlagt for blekk. [Gradienter på trykk](https://gradiently.design/nb/guide/print-gradients) forklarer hva som endrer seg på papir.

- Blekkbunn: #101828
- Signalblå: #1d4ed8
- Fiolett: #7c3aed
- Myk orkidé: #f0abfc

Idé 15: en familie rundt en signaturgradient. Signalblå er også den flate reservefargen, så små størrelser og enfarget trykk er allerede avgjort.

Merkevareideene fungerer bare med konsekvens: de samme fargene, vinkelen og teksturen i alle formater. [Gradient i merkevarebygging](https://gradiently.design/nb/guide/gradient-branding) går inn på hvordan du eier en i stedet for å låne den.

## Ideer til gradientdesign for nettsteder og bevegelse

1. **Glød i heroen.** En myk radial glød bak et skjermbilde av produktet løfter det opp fra siden uten skygge.
2. **Ett gradientord.** Legg en gradient på ett enkelt ord i en overskrift, aldri på hele avsnittet. Se [gradienttekst](https://gradiently.design/nb/guide/css-gradient-text).
3. **Langsom loop.** En bakgrunn som beveger seg så sakte at den først merkes etter noen sekunder. Den føles levende uten å konkurrere med ordene.
4. **Gradientkanter på kort.** En gradientkant på 1 eller 2 piksler rundt ellers flate kort gir en side en signatur med nesten ingen visuell vekt.
5. **Fargeskifte ved rulling.** Hver seksjon på en lang side ligger på neste steg av én gradient, så rullingen føles som å bevege seg gjennom lys.

```css
.headline .accent {
  background: linear-gradient(90deg, #7c3aed, #ec4899);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
```

Idé 22: gradient på bare ett ord. Pakk ordet inn i en span med klassen `accent`.

En stående historie som kunngjør en studioflytting over en gradient i myk bevegelse

Idé 23 i en historie: ordene står stille mens bakgrunnen driver.

## Slik velger du riktig idé

### Svak grunn

- Bakgrunnen så tom ut
- En forhåndsinnstilling var allerede åpen
- Alle konkurrentene bruker en
- En ny gradient for hvert innlegg

### Sterk grunn

- Gradienten peker på det viktigste
- Den skiller seksjoner eller steg i en rekkefølge
- Den bærer en stemning ordene trenger
- Den gjentas, så folk lærer å kjenne den igjen

Velg ideen som passer jobben, og bruk den konsekvent en stund. En gradient gjentatt i tjue innlegg gjør mer enn tjue smarte gradienter brukt én gang. Paletter for bestemte bransjer finner du i [gradientideer etter bransje](https://gradiently.design/nb/guide/gradient-ideas-by-industry).

## FAQ

### Hva er gradientdesign?

Gradientdesign er å bruke fargeoverganger som en strukturell del av en layout, for eksempel til å styre oppmerksomheten, skille seksjoner eller bære en merkevare, i stedet for bare som bakgrunnsfyll.

### Hvordan bruker jeg gradienter i en presentasjon?

Bruk en sterkere gradient på tittel- og seksjonsbilder og en nesten flat versjon på innholdsbilder, så tekst og diagrammer holder seg leselige. Å endre fargetonen steg for steg gjennom seksjonene hjelper folk å følge strukturen.

### Er gradienter bra for innlegg i sosiale medier?

Ja, når ordene står på en rolig del av gradienten og det samme uttrykket gjentas fra innlegg til innlegg. En ny gradient i hvert innlegg ser uplanlagt ut.

### Hvordan lager jeg gradienttekst i CSS?

Sett en gradient som bakgrunn, klipp bakgrunnen til teksten med background-clip: text, og gjør tekstfargen gjennomsiktig. Bruk det på et ord eller en kort overskrift, ikke på brødtekst.