# Gradiente rosa e blu: codici da zucchero filato al neon

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

Rosa e blu sono un po’ troppo distanti per fondersi da soli. Cura bene il centro e ottieni cieli da zucchero filato o insegne al neon; trascuralo e ottieni una macchia lilla spenta.

## The short version

- Un gradiente rosa e blu fonde rosa come #f9a8d4 o #ec4899 con blu come #93c5fd o #3b82f6, di solito passando per un lilla o un viola al centro.
- Poiché rosa e blu non sono colori vicini, una fusione diretta può diventare grigiastra a metà, e una tappa lilla o viola risolve il problema.
- Le fusioni di rosa e blu chiari sembrano zucchero filato e vogliono inchiostro scuro, mentre rosa saturo e ciano su un fondo quasi nero sembrano neon.
- Né il rosa acceso né il blu medio reggono bene un testo bianco piccolo, quindi tieni il bianco per titoli grandi o per fondi scuri.
- Rosa e blu stanno bene su baby shower, pasticcerie, creator, gaming ed estetiche retrò come vaporwave e Y2K.

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.

- Due tappe, miscela predefinita: `linear-gradient(90deg, #f472b6 0%, #60a5fa 100%)`
- Con un ponte viola: `linear-gradient(90deg, #f472b6 0%, #c084fc 50%, #60a5fa 100%)`

Lo stesso rosa e blu, con e senza tappa ponte. Il secondo resta saturo fino al centro. [I gradienti sporchi](https://gradiently.design/it/guide/muddy-gradients) spiega la scienza del colore.

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.

- Zucchero filato: `linear-gradient(135deg, #fbcfe8 0%, #e9d5ff 50%, #bfdbfe 100%)`
- Copertina baby: `linear-gradient(180deg, #fce7f3 0%, #e0f2fe 100%)`
- Nuvola di zucchero: `radial-gradient(circle at 20% 20%, #fbcfe8 0%, #ddd6fe 45%, #a5f3fc 100%)`
- Mattina di pesca: `linear-gradient(160deg, #fff7ed 0%, #fbcfe8 40%, #c7d2fe 100%)`

Fusioni pastello di rosa e azzurro. Ognuna ha una tappa lilla, pervinca o crema, così niente al centro diventa polveroso.

Per altra tavolozza morbida, [i gradienti pastello](https://gradiently.design/it/guide/pastel-gradients) e [le palette di colori pastello](https://gradiently.design/it/guide/pastel-color-palettes) vanno più a fondo.

> **Stampare rosa e azzurro pastello** Le fusioni molto pallide possono quasi sparire sulla carta non patinata, e i blu vivaci dello schermo spesso escono più spenti in stampa. Scurisci leggermente ogni tappa per inviti e volantini e chiedi una prova. [I gradienti in stampa](https://gradiently.design/it/guide/print-gradients) spiega i dettagli.

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

- Cielo di sera: `linear-gradient(180deg, #7dd3fc 0%, #c4b5fd 50%, #f9a8d4 100%)`
- Sorbetto: `linear-gradient(120deg, #f472b6 0%, #a78bfa 50%, #38bdf8 100%)`
- Festa in piscina: `radial-gradient(circle at 80% 80%, #fda4af 0%, #a5b4fc 45%, #7dd3fc 100%)`

Gradienti rosa e blu a media saturazione. Ideali per promozioni estive e contenuti per creator.

## 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](https://gradiently.design/it/guide/neon-gradients) e [i colori synthwave](https://gradiently.design/it/guide/synthwave-colors) approfondiscono lo stile.

- Giro di notte: `linear-gradient(180deg, #0b0720 0%, #3b0764 55%, #ec4899 100%)`
- Insegna al neon: `linear-gradient(90deg, #ec4899 0%, #8b5cf6 50%, #06b6d4 100%)`
- Lampada rosa, foschia ciano: `radial-gradient(ellipse at 20% 80%, #f0abfc 0%, #7e22ce 30%, #155e75 60%, #0b0720 85%)`
- Alba da sala giochi: `conic-gradient(from 180deg at 50% 100%, #06b6d4, #8b5cf6, #ec4899, #06b6d4)`

Rosa e blu neon. Il rosa pallido e il ciano sono entrambi ottimi colori di testo sulle parti scure.

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

| Sfondo | Testo | Contrasto | Verdetto |
| --- | --- | --- | --- |
| Gomma da masticare `#f9a8d4` | Ardesia `#1e293b` | 8,1:1 | Ottimo |
| Azzurro baby `#93c5fd` | Ardesia `#1e293b` | 8,1:1 | Ottimo |
| Rosa caramella `#fbcfe8` | Bianco | 1,4:1 | Non passa |
| Rosa acceso `#ec4899` | Bianco | 3,5:1 | Solo titoli grandi |
| Blu `#3b82f6` | Bianco | 3,7:1 | Solo titoli grandi |
| Notte `#0b0720` | Ciano `#67e8f9` | 13,6:1 | Ottimo, il neon come inchiostro |

L’ardesia ottiene lo stesso punteggio su entrambe le estremità pastello, quindi un solo inchiostro funziona su tutta la fusione da zucchero filato.

Un invito per baby shower con scritte ardesia scuro su un gradiente morbido rosa, lilla e azzurro baby

Un invito 5×7 in su zucchero filato, con scritte color ardesia.

Un annuncio di streaming orizzontale con scritte chiare su sfondo scuro illuminato da rosa neon e ciano

Un annuncio di streaming su rosa neon e ciano su fondo quasi nero.

## 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](https://gradiently.design/it/guide/y2k-aesthetic) 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

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

Una sezione pastello con testo ardesia e una sezione neon scura con due luci colorate.

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.

## FAQ

### Qual è un buon codice per un gradiente rosa e blu?

Per lo zucchero filato prova `linear-gradient(135deg, #fbcfe8 0%, #e9d5ff 50%, #bfdbfe 100%)`. Per il neon, `linear-gradient(90deg, #ec4899 0%, #8b5cf6 50%, #06b6d4 100%)`.

### Perché il mio gradiente rosa e blu sembra grigio al centro?

Una fusione diretta in sRGB tra un rosa caldo e un blu freddo perde saturazione a metà. Aggiungi una tappa lilla o viola al centro, oppure scrivi `in oklch` dopo l’angolo.

### Che colore di testo va su un gradiente rosa e azzurro pastello?

Un ardesia scuro come `#1e293b` si legge su entrambe le estremità con un contrasto di circa 8:1. Il bianco non passa su rosa e azzurro pastello.

### Che cos’è un gradiente zucchero filato?

Una fusione pastello di rosa e azzurro baby, di solito con una tappa lilla in mezzo, che prende il nome dal dolce.

### Come faccio un gradiente rosa e blu neon?

Usa rosa saturo e ciano su un fondo quasi nero, come aloni o bande e non come riempimento pieno. È il fondo scuro a far sembrare i colori illuminati.