# Pink og blå gradient: koder fra candyfloss til neon

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

Pink og blå ligger lidt for langt fra hinanden til at blande sig af sig selv. Styr midten, og du får candyflosshimle eller neonskilte; overse den, og du får en mat lilla plet.

## The short version

- En pink og blå gradient blander pink som #f9a8d4 eller #ec4899 med blå som #93c5fd eller #3b82f6 og går som regel gennem syren eller violet på midten.
- Fordi pink og blå ikke er direkte naboer, kan en lige blanding mellem dem blive grålig på midten, og et syrenfarvet eller violet stop løser det.
- Blege blandinger af pink og blå virker som candyfloss og kræver mørk skrift, mens mættet pink og cyan på næsten sort virker som neon.
- Hverken klar pink eller mellemblå bærer lille hvid tekst godt, så gem hvid til store overskrifter eller mørke bunde.
- Pink og blå passer til babyshowers, slikbutikker, skabere, gaming og retroæstetik som vaporwave og Y2K.

En **pink og blå gradient** blander en pink som `#f9a8d4` eller `#ec4899` over i en blå som `#93c5fd` eller `#3b82f6`. De to ligger lidt for langt fra hinanden på farvecirklen til at blande sig rent af sig selv, så de bedste versioner går gennem et syrenfarvet eller violet stop på midten. Hold parret blegt, og du får candyfloss; skru op for mætningen på en mørk bund, og du får neon. Koderne nedenfor dækker hele spektret, med løsningen på midten og de tekstfarver, der virker.

## Derfor bliver en pink og blå gradient grå på midten

Browsere blander som standard gradientfarver i sRGB, og mellem en varm pink og en kølig blå kan blandingen miste mætning og se lidt grå eller støvet ud. Det er ikke så dramatisk som at blande modsatte farver, men det kan ses, især i pastelblandinger. Løsningen er selv at bestemme midten: tilføj et syrenfarvet eller lavendelblåt stop, så hvert punkt i blandingen forbliver klart.

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

Den samme pink og blå, med og uden et brostop. Den anden forbliver mættet hele vejen gennem midten. [Mudrede gradienter](https://gradiently.design/da/guide/muddy-gradients) forklarer farvevidenskaben.

I CSS kan du også skrive `linear-gradient(90deg in oklch, #f472b6, #60a5fa)`, som holder lyshed og mætning jævn gennem blandingen. Brostoppet virker dog overalt og giver dig kontrol over præcis, hvilken syrenfarve der dukker op.

## Candyfloss-gradienter: pastel pink og blå

Bleg pink, der glider over i babyblå, føles sød, let og en smule nostalgisk. Hold en blød syren eller creme imellem dem, og sæt ordene i en mørk skifergrå frem for hvid.

- Candyfloss: `linear-gradient(135deg, #fbcfe8 0%, #e9d5ff 50%, #bfdbfe 100%)`
- Babytæppe: `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%)`

Blandinger af pastel pink og blå. Hver har et trin i syren, lavendelblå eller creme, så intet på midten bliver støvet.

Vil du have mere af den bløde palet, går [pastelgradienter](https://gradiently.design/da/guide/pastel-gradients) og [pastelfarvepaletter](https://gradiently.design/da/guide/pastel-color-palettes) bredere ud.

> **Tryk af pastel pink og blå** Meget blege blandinger kan næsten forsvinde på ubestrøget papir, og klare skærmblå farver bliver ofte mattere på tryk. Gør hvert stop lidt dybere til invitationer og flyers, og bed om en prøve. [Gradienter på tryk](https://gradiently.design/da/guide/print-gradients) gennemgår detaljerne.

## Himmel og sorbet: klarere pink og blå

Hæv mætningen lidt, og parret bliver solrigt og legende: en sommerhimmel sidst på dagen, en sorbetbod, en flyer til en poolfest. De virker stadig venlige frem for larmende.

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

Pink og blå gradienter med middel mætning. Ideelle til sommerkampagner og indhold fra skabere.

## Neon pink og blå gradienter

Knaldpink og elektrisk cyan på næsten sort er kendetegnet for vaporwave, synthwave og meget gamingdesign. Den mørke bund er ikke valgfri: det er den, der får farverne til at gløde. Hold neonen i bånd, kanter eller glød, og lad det meste af billedet være mørkt. [Neongradienter](https://gradiently.design/da/guide/neon-gradients) og [synthwave-farver](https://gradiently.design/da/guide/synthwave-colors) går i dybden med stilen.

- Nattekørsel: `linear-gradient(180deg, #0b0720 0%, #3b0764 55%, #ec4899 100%)`
- Neonskilt: `linear-gradient(90deg, #ec4899 0%, #8b5cf6 50%, #06b6d4 100%)`
- Pink lampe, cyan dis: `radial-gradient(ellipse at 20% 80%, #f0abfc 0%, #7e22ce 30%, #155e75 60%, #0b0720 85%)`
- Arkadesolopgang: `conic-gradient(from 180deg at 50% 100%, #06b6d4, #8b5cf6, #ec4899, #06b6d4)`

Neon pink og blå. Bleg pink og cyan er begge fremragende tekstfarver på de mørke partier.

## Tekstfarver på pink og blå gradienter

Begge ender af en pastel pink og blå gradient er lyse, så mørk skifergrå tekst kan læses på hele fladen, og det gør parret til et af de nemmeste at sætte tekst på. Mættede versioner er sværere: knaldpink og mellemblå er hver for sig for lyse til lille hvid tekst. Værdierne nedenfor bruger WCAG’s kontrastformel.

| Baggrund | Tekst | Kontrast | Vurdering |
| --- | --- | --- | --- |
| Tyggegummi `#f9a8d4` | Skifer `#1e293b` | 8,1:1 | Fremragende |
| Babyblå `#93c5fd` | Skifer `#1e293b` | 8,1:1 | Fremragende |
| Slikpink `#fbcfe8` | Hvid | 1,4:1 | Dumper |
| Knaldpink `#ec4899` | Hvid | 3,5:1 | Kun store overskrifter |
| Blå `#3b82f6` | Hvid | 3,7:1 | Kun store overskrifter |
| Nat `#0b0720` | Cyan `#67e8f9` | 13,6:1 | Fremragende, neon som skrift |

Skifergrå scorer det samme på begge pastelender, så én skriftfarve virker på hele candyfloss-blandingen.

En invitation til babyshower med mørke skifergrå bogstaver på en blød gradient i pink, syren og babyblå

En invitation i 5×7 in på candyfloss, med skifergrå bogstaver.

En liggende streamannoncering med lyse bogstaver på en mørk baggrund oplyst af neon pink og cyan

En streamannoncering i neon pink og cyan over næsten sort.

## Hvor en pink og blå gradient passer

- **Babyshowers og kønsafsløringer:** den mest traditionelle brug, bedst i de blegeste pasteller.
- **Slikbutikker, bagerier og is:** sorbettoner ser spiselige ud.
- **Skabere og streamere:** neonversioner på mørke bunde passer til gaming og indhold sent om aftenen.
- **Retroæstetik:** vaporwave, synthwave og [Y2K-æstetik](https://gradiently.design/da/guide/y2k-aesthetic) læner sig alle op ad parret.
- **Pride:** lyseblå, pink og hvid er farverne i det transkønnede prideflag, så parret ses meget i design til Pride-måneden.

## CSS til pink 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 pastelsektion med skifergrå tekst og en mørk neonsektion med to farvede lys.

Neonmønstret, to radiale lys på en mørk bund, er nemt at tilpasse: flyt lysene, ændr deres størrelse, tilføj et tredje i violet, hvor de mødes. Hold lysene små; når de dækker mere end halvdelen af billedet, forsvinder den mørke bund og dermed også gløden. I Gradiently går en Mark videre: dens lys bevæger sig langsomt, og dens skrift tilpasser sig den del af blandingen, den står på. Ét design eksporteres som et stillestående opslag eller med Pro som en loopende MP4 eller GIF.

## FAQ

### Hvad er en god kode til en pink og blå gradient?

Til candyfloss kan du prøve `linear-gradient(135deg, #fbcfe8 0%, #e9d5ff 50%, #bfdbfe 100%)`. Til neon `linear-gradient(90deg, #ec4899 0%, #8b5cf6 50%, #06b6d4 100%)`.

### Hvorfor ser min pink og blå gradient grå ud på midten?

En lige sRGB-blanding mellem en varm pink og en kølig blå mister mætning halvvejs. Tilføj et syrenfarvet eller violet stop på midten, eller skriv `in oklch` efter vinklen.

### Hvilken tekstfarve passer på en pastel pink og blå gradient?

En mørk skifergrå som `#1e293b` kan læses på begge ender med en kontrast på omkring 8:1. Hvid dumper på pastel pink og blå.

### Hvad er en candyfloss-gradient?

En pastelblanding af pink og babyblå, som regel med et syrenfarvet trin imellem, opkaldt efter slikket.

### Hvordan laver jeg en neon pink og blå gradient?

Brug mættet pink og cyan på en næsten sort bund, som glød eller bånd frem for en fuld flade. Det er den mørke bund, der får farverne til at se oplyste ud.