# Rosa og blå gradient: fra sukkerspinn til neon

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

Rosa og blått ligger litt for langt fra hverandre til å blandes på autopilot. Behandler du midten godt, får du sukkerspinnhimmel eller neonskilt. Overser du den, får du en matt syrinfarget flekk.

## The short version

- En rosa og blå gradient blander rosatoner som #f9a8d4 eller #ec4899 med blåtoner som #93c5fd eller #3b82f6, vanligvis gjennom syrin eller fiolett i midten.
- Fordi rosa og blått ikke er direkte naboer, kan en rett blanding bli grålig i midten. Et syrin- eller fiolettstopp løser det.
- Lyse rosa og blå blandinger minner om sukkerspinn og trenger mørk tekstfarge, mens mettet rosa og cyan på nesten svart virker som neon.
- Verken sterkt rosa eller mellomblått bærer liten hvit tekst godt. Bruk hvitt til store overskrifter eller på mørk bunn.
- Rosa og blått passer til babyshower, godteributikker, skapere, spill og retrouttrykk som vaporwave og Y2K.

En **rosa og blå gradient** blander en rosafarge som `#f9a8d4` eller `#ec4899` med en blå som `#93c5fd` eller `#3b82f6`. De to ligger litt for langt fra hverandre i fargesirkelen til å blandes rent som standard. De beste versjonene går derfor gjennom et syrin- eller fiolettstopp i midten. Hold paret lyst for sukkerspinn, eller mett det på mørk bunn for neon. Kodene nedenfor dekker hele spennet, med løsningen for midten og tekstfargene som virker.

## Hvorfor rosa og blå gradient blir grå i midten

Nettlesere blander gradientfarger i sRGB som standard. Mellom varmt rosa og kjølig blått kan blandingen miste metning og se litt grå eller støvet ut. Det er mindre dramatisk enn å blande motsetninger, men synlig, særlig i pasteller. Løsningen er å bestemme midten selv: legg til et syrin- eller lavendelblått stopp, så alle punkter i blandingen holder seg klare.

- To stopp, standardblanding: `linear-gradient(90deg, #f472b6 0%, #60a5fa 100%)`
- Med en fiolett bro: `linear-gradient(90deg, #f472b6 0%, #c084fc 50%, #60a5fa 100%)`

Samme rosa og blått, med og uten et brostopp. Den andre beholder metningen gjennom midten. [Grumsete gradienter](https://gradiently.design/nb/guide/muddy-gradients) forklarer fargevitenskapen.

I CSS kan du også skrive `linear-gradient(90deg in oklch, #f472b6, #60a5fa)`, som holder lyshet og metning jevne gjennom blandingen. Brostoppet fungerer likevel overalt og lar deg styre nøyaktig hvilken syrintone som dukker opp.

## Sukkerspinngradienter: pastellrosa og blått

Lyst rosa som glir inn i babyblått, virker søtt, lett og litt nostalgisk. Hold en myk syrin- eller kremtone mellom dem, og sett ordene i mørk skifer fremfor hvitt.

- Sukkerspinn: `linear-gradient(135deg, #fbcfe8 0%, #e9d5ff 50%, #bfdbfe 100%)`
- Babyteppe: `linear-gradient(180deg, #fce7f3 0%, #e0f2fe 100%)`
- Sukkersky: `radial-gradient(circle at 20% 20%, #fbcfe8 0%, #ddd6fe 45%, #a5f3fc 100%)`
- Ferskenmorgen: `linear-gradient(160deg, #fff7ed 0%, #fbcfe8 40%, #c7d2fe 100%)`

Pastellrosa og blå blandinger. Alle har et syrin-, lavendelblått eller kremfarget trinn, så midten ikke blir støvet.

[Pastellgradienter](https://gradiently.design/nb/guide/pastel-gradients) og [pastellpaletter](https://gradiently.design/nb/guide/pastel-color-palettes) dekker mer av den myke paletten.

> **Trykk av pastellrosa og blått** Svært lyse blandinger kan nesten forsvinne på ubestrøket papir, og klare skjermblåtoner blir ofte mattere i trykk. Gjør hvert stopp litt dypere til invitasjoner og flyere, og be om et prøvetrykk. [Gradienter i trykk](https://gradiently.design/nb/guide/print-gradients) dekker detaljene.

## Himmel og sorbet: klarere rosa og blått

Øk metningen litt, så blir paret solrikt og lekent: en sommerhimmel mot slutten av dagen, en sorbetbod, en bassengfestflyer. Disse virker fortsatt vennlige fremfor høylytte.

- Kveldshimmel: `linear-gradient(180deg, #7dd3fc 0%, #c4b5fd 50%, #f9a8d4 100%)`
- Sorbet: `linear-gradient(120deg, #f472b6 0%, #a78bfa 50%, #38bdf8 100%)`
- Bassengfest: `radial-gradient(circle at 80% 80%, #fda4af 0%, #a5b4fc 45%, #7dd3fc 100%)`

Rosa og blå gradienter med middels metning. Ideelle til sommerkampanjer og skaperinnhold.

## Neonrosa og blå gradienter

Sterkt rosa og elektrisk cyan på nesten svart er signaturen til vaporwave, synthwave og mye spilldesign. Mørk bunn er nødvendig: den får fargene til å gløde. Hold neon i bånd, kanter eller lysfelt, og la det meste være mørkt. [Neongradienter](https://gradiently.design/nb/guide/neon-gradients) og [synthwave-farger](https://gradiently.design/nb/guide/synthwave-colors) dekker stilen i dybden.

- Nattkjøring: `linear-gradient(180deg, #0b0720 0%, #3b0764 55%, #ec4899 100%)`
- Neonskilt: `linear-gradient(90deg, #ec4899 0%, #8b5cf6 50%, #06b6d4 100%)`
- Rosa lampe, cyandis: `radial-gradient(ellipse at 20% 80%, #f0abfc 0%, #7e22ce 30%, #155e75 60%, #0b0720 85%)`
- Arkadesoloppgang: `conic-gradient(from 180deg at 50% 100%, #06b6d4, #8b5cf6, #ec4899, #06b6d4)`

Neonrosa og blått. Både lyst rosa og cyan er gode tekstfarger på de mørke delene.

## Tekstfarger på rosa og blå gradienter

Begge endene av en pastellrosa og blå gradient er lyse. Mørk skifertekst er derfor lesbar over hele flaten, noe som gjør dette til et av de enkleste parene å sette tekst på. Mettede versjoner er vanskeligere: både sterkt rosa og mellomblått er for lyse for liten hvit tekst. Verdiene nedenfor bruker WCAGs kontrastformel.

| Bakgrunn | Tekst | Kontrast | Vurdering |
| --- | --- | --- | --- |
| Tyggegummi `#f9a8d4` | Skifer `#1e293b` | 8,1:1 | Utmerket |
| Babyblått `#93c5fd` | Skifer `#1e293b` | 8,1:1 | Utmerket |
| Godterirosa `#fbcfe8` | Hvitt | 1,4:1 | For svak kontrast |
| Sterkt rosa `#ec4899` | Hvitt | 3,5:1 | Bare store overskrifter |
| Blått `#3b82f6` | Hvitt | 3,7:1 | Bare store overskrifter |
| Natt `#0b0720` | Cyan `#67e8f9` | 13,6:1 | Utmerket, neon som tekstfarge |

Skifer får samme verdi på begge pastellendene, så én tekstfarge fungerer gjennom hele sukkerspinnblandingen.

En babyshower-invitasjon med mørk skiferskrift på en myk gradient i rosa, syrin og babyblått

En invitasjon på 5×7 in i sukkerspinnfarger, med skiferskrift.

En liggende strømmeannonsering med lys skrift på mørk bakgrunn belyst med neonrosa og cyan

En strømmeannonsering med neonrosa og cyan på nesten svart.

## Hvor rosa og blå gradient passer

- **Babyshower og kjønnsavsløringer:** den mest tradisjonelle bruken, helst i de lyseste pastellene.
- **Godteributikker, bakerier og iskrem:** sorbettoner ser spiselige ut.
- **Skapere og strømmere:** neonversjoner på mørk bunn passer til spill og nattinnhold.
- **Retrouttrykk:** vaporwave, synthwave og [Y2K-estetikk](https://gradiently.design/nb/guide/y2k-aesthetic) bruker alle paret.
- **Pride:** lyseblått, rosa og hvitt er fargene i transflagget, så paret brukes mye i Pride-design.

## CSS for rosa og blå gradient

```css
.cotton-candy {
  background: linear-gradient(135deg, #fbcfe8 0%, #e9d5ff 50%, #bfdbfe 100%);
  color: #1e293b;
}

.neon {
  background-color: #0b0720;
  background-image:
    radial-gradient(circle at 15% 85%, #ec4899 0%, transparent 40%),
    radial-gradient(circle at 85% 15%, #06b6d4 0%, transparent 40%);
  color: #fce7f3;
}
```

En pastellseksjon med skifertekst, og en mørk neonseksjon med to fargede lys.

Neonmønsteret, to radiale lys på mørk base, er enkelt å tilpasse: flytt lysene, endre størrelsen, legg til et tredje i fiolett der de møtes. Hold lysene små. Når de dekker mer enn halve rammen, forsvinner den mørke bunnen og dermed gløden. I Gradiently går en Mark videre: lyset beveger seg langsomt, og skriften tilpasser seg delen av blandingen den står på. Ett design eksporteres som et stillbildeinnlegg, eller med Pro som en MP4- eller GIF-sløyfe.

## FAQ

### Hva er en god kode for rosa og blå gradient?

For sukkerspinn, prøv `linear-gradient(135deg, #fbcfe8 0%, #e9d5ff 50%, #bfdbfe 100%)`. For neon, `linear-gradient(90deg, #ec4899 0%, #8b5cf6 50%, #06b6d4 100%)`.

### Hvorfor ser rosa og blå-gradienten min grå ut i midten?

En rett sRGB-blanding mellom varmt rosa og kjølig blått mister metning halvveis. Legg til et syrin- eller fiolettstopp i midten, eller skriv `in oklch` etter vinkelen.

### Hvilken tekstfarge passer på en pastellrosa og blå gradient?

En mørk skifer som `#1e293b` er lesbar på begge ender med omtrent 8:1 kontrast. Hvitt har for svak kontrast på pastellrosa og blått.

### Hva er en sukkerspinngradient?

En pastellblanding av rosa og babyblått, vanligvis med et syrintrinn mellom dem, oppkalt etter godteriet.

### Hvordan lager jeg en neonrosa og blå gradient?

Bruk mettet rosa og cyan på nesten svart bunn, som lysfelt eller bånd fremfor en heldekkende flate. Mørket får fargene til å virke opplyste.