# Kendte gradientlogoer: lær af velkendte identiteter

[Canonical HTML page](https://gradiently.design/da/guide/famous-gradient-logos)

Nogle få veldokumenterede redesign gjorde gradienter til en fast del af logodesign. Her er det, der ændrede sig, og det, ethvert brand kan lære af det.

## The short version

- Gradientlogoer blev almindelige i midten af 2010’erne, da store apps erstattede detaljerede eller flade ikoner med enkle symboler på farverige gradienter.
- Instagrams redesign i 2016 erstattede et detaljeret kameraikon med en enkel kamerakontur på en gradient fra varme farver til violet, så farven blev det vigtigste kendetegn.
- Messenger gik fra ensfarvet blå til en gradient i blå, lilla og lyserød i 2020, samtidig med at beskeder på tværs af Instagram og Messenger blev introduceret.
- Mozillas brandsystem fra 2019 gav Firefox og de tilknyttede produkter en fælles familie af klare gradienter og viste, hvordan en gradient kan samle flere logoer.
- Læren til ethvert gradientlogo: hold formen enkel, før genkendelige farver videre, fastlæg gradienten præcist, og hav altid en ensfarvet version.

**Kendte gradientlogoer** gik fra sjældne til allestedsnærværende i midten af 2010’erne, da nogle af verdens mest brugte apps skiftede til enkle symboler på farverige gradienter. Skiftet lærte designere noget, der stadig gælder: når et logo vises som en lille firkant blandt snesevis af andre, gør farven mere for genkendeligheden end formen. De bedste gradientidentiteter kombinerer et meget enkelt symbol med en fast, særpræget gradient, som bruges overalt.

Denne artikel ser på tre veldokumenterede redesign og udleder generelle erfaringer. Den beskriver de offentligt synlige ændringer, ikke hvordan eller hvorfor virksomhederne besluttede sig. Se [gradientlogoer: hvornår de virker](https://gradiently.design/da/guide/gradient-logo) for håndværket bag dit eget.

## Derfor overtog gradientlogoer appikonerne

Telefonernes hjemmeskærme ændrede logoets opgave. Hver app får samme afrundede firkant i omtrent samme størrelse omgivet af andre. Detaljerede illustrationer flyder sammen i den størrelse, og én ensfarvet flade deles med snesevis af andre apps. En gradient tilbyder noget midt imellem: en farvesignatur med flere kombinationer end en enkelt farve, som kan aflæses, selv når symbolet ovenpå er for lille til at ses tydeligt.

- Ensfarvede flader: lette at dele: `linear-gradient(90deg, #3b82f6 0% 33%, #22c55e 33% 66%, #ef4444 66% 100%)`
- En gradient: sværere at forveksle: `linear-gradient(45deg, #fbbf24 0%, #f97316 30%, #db2777 60%, #7c3aed 100%)`

Ensfarvede brandfarver går igen på en hjemmeskærm. En bestemt gradient med flere farvestop er en langt sjældnere signatur.

## Instagram, 2016: gradienten bliver brandet

I maj 2016 erstattede Instagram sit detaljerede retrokameraikon med en enkel hvid kamerakontur på en gradient fra varm gul og orange nederst til venstre gennem lyserød og magenta til lilla øverst til højre. Ved lanceringen præsenterede virksomheden farverne som en videreudvikling af regnbuestriben på det gamle ikon. Redesignet vakte først stærke reaktioner, og gradienten har siden været central for brandet, opdateret i 2022 sammen med en ny skrifttype.

Diagonal fra varmt til violet: `linear-gradient(45deg, #feda75 0%, #fa7e1e 25%, #d62976 55%, #962fbf 80%, #4f5bd5 100%)`

En gradient i samme familie som ikonet fra 2016: varm i ét hjørne og kølig i det modsatte. En tilnærmelse til studiebrug, ikke en officiel brandfarve.

- **Symbolet blev enklere, mens farven blev rigere.** Et kamera tegnet som kontur giver gradienten plads til at være den genkendelige del.
- **Den eksisterende genkendelighed blev ført videre.** Farverne i det gamle ikon blev nyfortolket frem for kasseret.
- **En diagonal fra varmt til køligt** giver gradienten en retning, folk kan huske, frem for blot et sæt farver.

## Messenger, 2020: ny farve signalerede et ændret produkt

I 2020 erstattede Messenger sit ensfarvede blå logo med en gradient i blå, lilla og lyserød. Skiftet kom samtidig med beskeder mellem Instagram og Messenger. Formen, en taleboble med et lyn, blev bevaret, så folk stadig kunne finde den. Kun farven ændrede sig.

- Før: én ensfarvet blå: `linear-gradient(180deg, #0084ff 0%, #0084ff 100%)`
- Efter: blå over i lilla og lyserød: `linear-gradient(45deg, #0695ff 0%, #a334fa 55%, #ff6968 100%)`

Tilnærmelser af før og efter. Ved at bevare formen og ændre farven kan et velkendt logo annoncere noget nyt.

Læren er, at en gradient kan sige »noget er ændret« uden at miste genkendelighed, så længe den velkendte form bevares. Det er et nyttigt mønster ved enhver [rebranding](https://gradiently.design/da/guide/rebrand-checklist): ændr ét stærkt kendetegn ad gangen.

## Firefox, 2019: én gradientfamilie til mange produkter

I 2019 introducerede Mozilla et nyt brandsystem, hvor Firefox blev familienavn for flere produkter. Browserlogoet beholdt sin ræv i forenklet form, og familien delte klare gradienter i gul, orange, rød, lyserød og lilla på tværs af produktikonerne. Hvert ikon havde sin egen form, men de fælles gradienter fik dem til at ligne slægtninge.

- Familiens varme farveforløb: `linear-gradient(135deg, #fff44f 0%, #ff980e 35%, #ff3750 70%, #9059ff 100%)`
- Forskudt forløb til en slægtning: `linear-gradient(135deg, #ff980e 0%, #ff3750 50%, #b833e1 100%)`
- En køligere slægtning: `linear-gradient(135deg, #ff3750 0%, #b833e1 50%, #592acb 100%)`

En gradientfamilie kan fungere ved at forskyde udsnittet langs et fælles farveforløb. Hvert produkt får sin egen blanding, og de hører stadig sammen.

## Det har disse gradientidentiteter til fælles

| Identitet | År | Ændring | Lære |
| --- | --- | --- | --- |
| Instagram | 2016 | Detaljeret kamera til kontursymbol på en gradient fra varmt til violet | Forenkl formen, og lad farven bære genkendeligheden |
| Messenger | 2020 | Ensfarvet blå til gradient i blå, lilla og lyserød | Bevar formen, og skift farven for at signalere nyt |
| Firefox | 2019 | Ét browserlogo til en familie med fælles gradienter | Et gradientforløb kan samle mange logoer |

Alle tre placerer en enkel, velkendt form på en præcis gradient, som gentages overalt.

## Fem erfaringer til dit eget gradientlogo

1. **Hold formen meget enkel** Gradienten fører ordet, så symbolet ovenpå skal kunne aflæses som et appikon eller en avatar.
2. **Før genkendelige farver videre** Har du allerede en kendt farve, så byg gradienten ud fra den. Den genkendelighed, du har opbygget, er værd at bevare.
3. **Fastlæg gradienten præcist** Notér hvert farvestop, hver position og vinklen. En gradient genskabt på øjemål ændrer sig, og genkendeligheden følger med. [Ensartet branding](https://gradiently.design/da/guide/brand-consistency) forklarer hvorfor.
4. **Hav altid en ensfarvet version** Favicons, broderi, tryk i én farve og nogle grænseflader kan ikke vise en gradient. Vælg én ensfarvet flade og en hvid eller sort version af symbolet.
5. **Brug gradienten ud over logoet** De stærkeste eksempler gentager gradienten i baggrunde, fremhævninger og bevægelse, så den bliver et [særpræget brandelement](https://gradiently.design/da/guide/distinctive-brand-assets) i sig selv.

```css
.logo-tile {
  /* Flat fallback: the one colour chosen for small or limited uses */
  background-color: #d62976;
  /* The exact gradient, with every stop recorded */
  background-image: linear-gradient(45deg, #feda75 0%, #fa7e1e 25%, #d62976 55%, #962fbf 80%, #4f5bd5 100%);
  border-radius: 22%;
  aspect-ratio: 1;
}
```

En gradientflise med den ensfarvede reserve angivet først. Nedskrevne farvestop holder logoet identisk overalt.

En gradient kan også give problemer bag et logo frem for inde i det. Hvis dit logo står på din egen gradient, så læs [placér et logo på en gradient](https://gradiently.design/da/guide/logo-on-gradient-background). Se [branding med gradienter](https://gradiently.design/da/guide/gradient-branding) for at bygge en hel identitet omkring en.

## FAQ

### Hvornår skiftede Instagram til et gradientlogo?

I maj 2016, da det detaljerede kameraikon blev erstattet af en enkel kamerakontur på en gradient fra gul og orange gennem lyserød til lilla.

### Hvorfor bruger så mange apps gradientlogoer?

Appikoner deler den samme lille afrundede firkant, så farven gør det meste af arbejdet for genkendeligheden. En bestemt gradient er mere særpræget end en enkelt farve.

### Virker gradientlogoer på tryk?

Ofte, med omhu. Gradienter kan få farvebånd eller skifte farve på tryk, så ethvert gradientlogo bør også have en ensfarvet version og versioner i sort og hvid.

### Hvordan laver jeg et gradientlogo, der forbliver genkendeligt?

Brug en enkel form, fastlæg de præcise farvestop og vinklen, gentag gradienten i dit brand, og behold en ensfarvet reserve til små eller begrænsede anvendelser.