Gradiente rosa e blu: codici da zucchero filato al neon

Un gradiente rosa e blu fonde un rosa come #f9a8d4 o #ec4899 in un blu come #93c5fd o #3b82f6. I due sono un po’ troppo lontani sul cerchio cromatico per mescolarsi bene di default, quindi le versioni migliori passano per una tappa lilla o viola al centro. Tieni la coppia chiara e ottieni lo zucchero filato; spingila satura su un fondo scuro e ottieni il neon. I codici qui sotto coprono tutta questa gamma, con la correzione per il centro e i colori di testo che funzionano.

Perché un gradiente rosa e blu diventa grigio al centro

I browser mescolano i colori dei gradienti in sRGB per impostazione predefinita, e tra un rosa caldo e un blu freddo quella miscela può perdere saturazione e sembrare un po’ grigia o polverosa. Non è drammatico come fondere colori opposti, ma si vede, soprattutto nelle fusioni pastello. La soluzione è dare un nome al centro: aggiungi una tappa lilla o pervinca così ogni punto della fusione resta nitido.

In CSS puoi anche scrivere linear-gradient(90deg in oklch, #f472b6, #60a5fa), che mantiene luminosità e saturazione uniformi lungo la fusione. La tappa ponte però funziona ovunque e ti dà il controllo esatto su quale lilla compare.

Gradienti zucchero filato: rosa e azzurro pastello

Un rosa pallido che sfuma in azzurro baby dà un’idea di dolcezza, leggerezza e un po’ di nostalgia. Tieni un lilla tenue o un crema in mezzo e scrivi le parole in un grigio ardesia scuro anziché in bianco.

Per altra tavolozza morbida, i gradienti pastello e le palette di colori pastello vanno più a fondo.

Cielo e sorbetto: rosa e blu più accesi

Alza un po’ la saturazione e la coppia diventa solare e giocosa: un cielo d’estate a fine giornata, un banco di sorbetti, il volantino di una festa in piscina. Resta amichevole, non urlata.

Gradienti rosa e blu neon

Rosa acceso e ciano elettrico su un fondo quasi nero sono il marchio di vaporwave, synthwave e di molto design per il gaming. Il fondo scuro non è facoltativo: è ciò che fa brillare i colori. Tieni il neon in bande, bordi o aloni e lascia scura la maggior parte dell’inquadratura. I gradienti neon e i colori synthwave approfondiscono lo stile.

Colori del testo sui gradienti rosa e blu

Entrambe le estremità di un gradiente rosa e azzurro pastello sono chiare, quindi il testo ardesia scuro si legge su tutta la superficie, il che la rende una delle coppie più facili su cui comporre testo. Le versioni sature sono più insidiose: rosa acceso e blu medio sono entrambi troppo chiari per un testo bianco piccolo. I valori qui sotto usano la formula di contrasto WCAG.

Dove sta bene un gradiente rosa e blu

• Baby shower e gender reveal: l’uso più tradizionale, meglio nei pastelli più pallidi.
• Pasticcerie, forni e gelaterie: i toni sorbetto sembrano commestibili.
• Creator e streamer: le versioni neon su fondi scuri vanno bene per gaming e contenuti notturni.
• Estetiche retrò: vaporwave, synthwave e i design estetica Y2K puntano tutti su questa coppia.
• Pride: azzurro, rosa e bianco sono i colori della bandiera dell’orgoglio transgender, perciò la coppia compare spesso nel design per il mese del Pride.

CSS per un gradiente rosa e blu

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

Lo schema neon, due luci radiali su una base scura, è facile da adattare: sposta le luci, cambia la loro dimensione, aggiungine una terza viola dove si incontrano. Tieni le luci piccole; quando coprono più di metà dell’inquadratura il fondo scuro sparisce e con lui l’alone. In Gradiently un Mark va oltre: la sua luce si muove lenta e il suo testo si adatta alla parte della fusione su cui si trova. Un design si esporta come post statico o, con Pro, come MP4 o GIF in loop.