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

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.

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.

För mer av den mjuka paletten går pastellgradienter och pastellfärgpaletter bredare.

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.

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 och synthwave-färger täcker stilen på djupet.

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.

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 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

.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;
}

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.