# Rosa och blå gradient: koder från sockervadd till neon

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

Rosa och blått ligger lite för långt ifrån varandra för att blandas på autopilot. Sköt mitten väl och du får sockervaddshimlar eller neonskyltar; ignorera den och du får en trist lila fläck.

## The short version

- En rosa och blå gradient blandar rosa som #f9a8d4 eller #ec4899 med blått som #93c5fd eller #3b82f6, oftast via lila eller violett i mitten.
- Eftersom rosa och blått inte är direkta grannar kan en rak blandning mellan dem bli gråaktig i mitten, och ett lila eller violett stopp löser det.
- Bleka rosa och blå blandningar läses som sockervadd och behöver mörk text, medan mättat rosa och cyan på nästan svart läses som neon.
- Varken klarrosa eller mellanblått bär liten vit text bra, så spara vitt till stora rubriker eller mörka bottnar.
- Rosa och blått passar babyshower, godisbutiker, skapare, spel och retroestetik som vaporwave och Y2K.

En **rosa och blå gradient** blandar ett rosa som `#f9a8d4` eller `#ec4899` med ett blått som `#93c5fd` eller `#3b82f6`. De två ligger lite för långt isär på färghjulet för att blandas rent som standard, så de bästa versionerna passerar ett lila eller violett stopp i mitten. Håll paret blekt och du får sockervadd; driv det mättat på en mörk botten och du får neon. Koderna nedan täcker hela spannet, med lösningen för mitten och textfärgerna som fungerar.

## Varför en rosa och blå gradient blir grå i mitten

Webbläsare blandar gradientfärger i sRGB som standard, och mellan ett varmt rosa och ett svalt blått kan den blandningen tappa mättnad och se lite grå eller dammig ut. Det är inte lika dramatiskt som att blanda motsatser, men du ser det, särskilt i pastellblandningar. Lösningen är att namnge mitten själv: lägg till ett lila eller blåviolett stopp så att varje punkt i blandningen förblir klar.

- Två stopp, standardblandning: `linear-gradient(90deg, #f472b6 0%, #60a5fa 100%)`
- Med en violett brygga: `linear-gradient(90deg, #f472b6 0%, #c084fc 50%, #60a5fa 100%)`

Samma rosa och blå, med och utan ett bryggstopp. Den andra förblir mättad genom mitten. [Leriga gradienter](https://gradiently.design/sv/guide/muddy-gradients) förklarar färgvetenskapen.

I CSS kan du också skriva `linear-gradient(90deg in oklch, #f472b6, #60a5fa)`, vilket håller ljusheten och mättnaden jämn över blandningen. Bryggstoppet fungerar överallt, dock, och ger dig kontroll över exakt vilket lila som dyker upp.

## Sockervaddsgradienter: pastellrosa och blått

Blekrosa som glider in i babyblått känns sött, lätt och lite nostalgiskt. Behåll ett mjukt lila eller kräm mellan dem, och sätt orden i en mörk skiffer snarare än vitt.

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

Pastellblandningar av rosa och blått. Var och en har ett lila, blåviolett eller krämfärgat steg, så att inget i mitten blir dammigt.

För mer av den mjuka paletten går [pastellgradienter](https://gradiently.design/sv/guide/pastel-gradients) och [pastellfärgpaletter](https://gradiently.design/sv/guide/pastel-color-palettes) bredare.

> **Trycka pastellrosa och blått** Mycket bleka blandningar kan nästan försvinna på obestruket papper, och klara skärmblå trycks ofta dovare. Fördjupa varje stopp något för inbjudningar och flygblad och be om ett provtryck. [Gradienter i tryck](https://gradiently.design/sv/guide/print-gradients) tar upp detaljerna.

## Himmel och sorbet: klarare rosa och blått

Höj mättnaden något så blir paret soligt och lekfullt: en sommarhimmel i slutet av dagen, ett sorbetstånd, ett flygblad till en poolfest. De läses fortfarande som vänliga snarare än högljudda.

- Kvällshimmel: `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%)`

Rosa och blå gradienter med medelmättnad. Perfekta för sommarkampanjer och skaparinnehåll.

## Neonrosa och blå gradienter

Klarrosa och elektrisk cyan på nästan svart är signaturen för vaporwave, synthwave och mycket speldesign. Den mörka bottnen är inte valfri: den är det som får färgerna att glöda. Håll neonet i band, kanter eller sken och lämna det mesta av bilden mörkt. [Neongradienter](https://gradiently.design/sv/guide/neon-gradients) och [synthwave-färger](https://gradiently.design/sv/guide/synthwave-colors) täcker stilen på djupet.

- Nattfärd: `linear-gradient(180deg, #0b0720 0%, #3b0764 55%, #ec4899 100%)`
- Neonskylt: `linear-gradient(90deg, #ec4899 0%, #8b5cf6 50%, #06b6d4 100%)`
- Rosa lampa, cyan dis: `radial-gradient(ellipse at 20% 80%, #f0abfc 0%, #7e22ce 30%, #155e75 60%, #0b0720 85%)`
- Arkadsoluppgång: `conic-gradient(from 180deg at 50% 100%, #06b6d4, #8b5cf6, #ec4899, #06b6d4)`

Neonrosa och blått. Blekrosa och cyan fungerar båda utmärkt som textfärger på de mörka delarna.

## Textfärger på rosa och blå gradienter

Båda ändarna av en pastellrosa och blå gradient är ljusa, så mörk skifferfärgad text läses på hela ytan, vilket gör det här till ett av de enklaste paren att sätta text på. Mättade versioner är knepigare: klarrosa och mellanblått är var och en för ljusa för liten vit text. Värdena nedan använder WCAG:s kontrastformel.

| Bakgrund | Text | Kontrast | Utlåtande |
| --- | --- | --- | --- |
| Tuggummi `#f9a8d4` | Skiffer `#1e293b` | 8,1:1 | Utmärkt |
| Babyblått `#93c5fd` | Skiffer `#1e293b` | 8,1:1 | Utmärkt |
| Godisrosa `#fbcfe8` | Vitt | 1,4:1 | Underkänt |
| Klarrosa `#ec4899` | Vitt | 3,5:1 | Bara stora rubriker |
| Blått `#3b82f6` | Vitt | 3,7:1 | Bara stora rubriker |
| Natt `#0b0720` | Cyan `#67e8f9` | 13,6:1 | Utmärkt, neon som text |

Skiffer får samma värde på båda pastelländarna, så en textfärg fungerar över hela sockervaddsblandningen.

En babyshowerinbjudan med mörk skifferfärgad text på en mjuk gradient i rosa, lila och babyblått

En inbjudan i 5×7 tum på sockervadd, med skifferfärgad text.

Ett liggande streamingmeddelande med blek text på en mörk bakgrund upplyst med neonrosa och cyan

Ett streamingmeddelande i neonrosa och cyan över nästan svart.

## Där en rosa och blå gradient passar

- **Babyshower och könsavslöjanden:** den mest traditionella användningen, bäst i de blekaste pastellerna.
- **Godisbutiker, bagerier och glass:** sorbettoner ser ätbara ut.
- **Skapare och streamers:** neonversioner på mörka bottnar passar spel och innehåll sent på kvällen.
- **Retroestetik:** vaporwave, synthwave och designer i [Y2K-estetik](https://gradiently.design/sv/guide/y2k-aesthetic) lutar sig alla mot paret.
- **Pride:** ljusblått, rosa och vitt är färgerna i transflaggan, så paret förekommer ofta i design under Pride.

## Rosa och blå gradient i CSS

```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 pastellsektion med skifferfärgad text och en mörk neonsektion med två färgade ljus.

Neonmönstret, två radiella ljus på en mörk bas, är lätt att anpassa: flytta ljusen, ändra deras storlek, lägg till ett tredje i violett där de möts. Håll ljusen små; när de täcker mer än hälften av bilden försvinner den mörka bottnen och med den glöden. I Gradiently går en Mark längre: dess ljus rör sig långsamt och dess text anpassar sig till den del av blandningen den sitter på. En design exporteras som ett stilla inlägg, eller med Pro som en loopande MP4 eller GIF.

## FAQ

### Vilken är en bra kod för rosa och blå gradient?

För sockervadd, prova `linear-gradient(135deg, #fbcfe8 0%, #e9d5ff 50%, #bfdbfe 100%)`. För neon, `linear-gradient(90deg, #ec4899 0%, #8b5cf6 50%, #06b6d4 100%)`.

### Varför ser min rosa och blå gradient grå ut i mitten?

En rak sRGB-blandning mellan ett varmt rosa och ett svalt blått tappar mättnad på halva vägen. Lägg till ett lila eller violett stopp i mitten, eller skriv `in oklch` efter vinkeln.

### Vilken textfärg passar på en pastellrosa och blå gradient?

En mörk skiffer som `#1e293b` läses på båda ändar med cirka 8:1 i kontrast. Vitt fungerar inte på pastellrosa och blått.

### Vad är en sockervaddsgradient?

En pastellblandning av rosa och babyblått, oftast med ett lila steg mellan dem, uppkallad efter sötsaken.

### Hur gör jag en neonrosa och blå gradient?

Använd mättat rosa och cyan på en nästan svart botten, som sken eller band snarare än en full fyllning. Den mörka bottnen är det som får färgerna att se upplysta ut.