Pink og blå gradient: koder fra candyfloss til neon

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.

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.

Vil du have mere af den bløde palet, går pastelgradienter og pastelfarvepaletter bredere ud.

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.

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 og synthwave-farver går i dybden med stilen.

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.

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

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