# Gradiente rosa e viola: codici dalla caramella al crepuscolo

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

Rosa e viola possono essere zuccherosi, glamour o discretamente malinconici, a seconda di quanto sono chiari e saturi. Ecco i codici per ogni passo di quella gamma e come scegliere.

## The short version

- Un gradiente rosa e viola fonde tonalità vicine come il rosa #ec4899, il magenta #c026d3 e il violetto #9333ea, quindi il passaggio resta vivace senza un colore ponte.
- La stessa coppia sembra caramella quando è pallida, glamour quando è satura e crepuscolo quando è scura.
- Il testo bianco non passa su rosa acceso e lilla pallido, quindi usa lì un inchiostro prugna intenso e tieni il bianco per magenta, violetto e fondi scuri.
- Aggiungere un po’ di arancione, blu o oro a un gradiente rosa e viola lo rende molto meno prevedibile della solita fusione a due colori.
- Rosa e viola stanno bene su bellezza, vita notturna, musica, celebrazioni e brand di creator, e un fondo scuro evita che sembrino infantili.

Un **gradiente rosa e viola** fonde due vicini del cerchio cromatico, un rosa come `#ec4899` e un violetto come `#9333ea`, con magenta e orchidea in mezzo. Poiché le tonalità sono adiacenti, la fusione resta vivida da un capo all’altro. Ciò che cambia tutto è la luminosità: tienila pallida e ottieni lo zucchero filato, spingi la saturazione e ottieni glamour, scurisci e ottieni il crepuscolo. I codici qui sotto vanno dal chiaro allo scuro, così scegli prima l’umore e poi i valori esadecimali.

## Gli umori dei gradienti rosa e viola a colpo d’occhio

| Umore | Tappe tipiche | Sensazione | Funziona per |
| --- | --- | --- | --- |
| Caramella | Da `#fbcfe8` a `#e9d5ff` | Dolce, morbido, giovane | Pasticcerie, baby shower, cartoleria |
| Orchidea | Da `#f0abfc` a `#c084fc` | Sognante, romantico | Bellezza, matrimoni, benessere |
| Magenta | Da `#ec4899` a `#9333ea` | Audace, glamour | Vita notturna, musica, creator |
| Crepuscolo | Da `#2e0a2f` a `#9d174d` | Cupo, adulto | Profumi, cocktail, eventi serali |

Quattro umori da una sola coppia. Ogni riga della tabella è più scura o più satura della precedente.

- Rosa caramella: #fbcfe8
- Gomma da masticare: #f9a8d4
- Rosa acceso: #ec4899
- Magenta: #c026d3
- Viola orchidea: #a855f7
- Violetto: #9333ea
- Lilla: #e9d5ff
- Inchiostro prugna: #2e0a2f

Una palette di lavoro per la coppia, con le estremità chiara e scura che servono per il testo.

## Gradienti rosa e viola caramella

Rosa e lilla pallidi insieme sono la cosa più morbida che il colore possa dare. Vanno bene per tutto ciò che è dolce o gentile, ma possono scivolare presto nell’infantile. La soluzione è un fondo leggermente caldo, una pesca o un crema a un’estremità, e un testo scuro molto sicuro di sé.

- Zucchero filato: `linear-gradient(135deg, #fce7f3 0%, #fbcfe8 45%, #e9d5ff 100%)`
- Latte alla fragola: `linear-gradient(180deg, #fff1f2 0%, #f5d0fe 100%)`
- Pesca, rosa, lilla: `radial-gradient(circle at 25% 25%, #ffedd5 0%, #fbcfe8 45%, #ddd6fe 100%)`

Fusioni caramella, tutte con un inchiostro prugna intenso. La pesca nella terza evita l’effetto zuccheroso.

Per altra morbidezza di questo tipo, [i gradienti pastello](https://gradiently.design/it/guide/pastel-gradients) coprono l’intera famiglia, e [i gradienti lavanda](https://gradiently.design/it/guide/lavender-gradient) vanno più verso il viola.

## Gradienti orchidea e magenta

Alza la saturazione e la coppia diventa glamour. È il territorio di smalti, braccialetti da festival e copertine di album. Usa un angolo leggero o un alone radiale invece di una diagonale piatta e lascia una zona più calma per le parole.

- Da rosa acceso a violetto: `linear-gradient(135deg, #ec4899 0%, #c026d3 50%, #9333ea 100%)`
- Orchidea in fiore: `radial-gradient(circle at 70% 30%, #f0abfc 0%, #c026d3 45%, #6b21a8 100%)`
- Glamour di bacche: `linear-gradient(160deg, #db2777 0%, #a21caf 60%, #581c87 100%)`
- Vortice iridescente: `conic-gradient(from 90deg at 40% 60%, #f472b6, #a855f7, #e879f9, #f472b6)`

Gradienti rosa e viola saturi. Quello conico sembra uno scintillio, vicino ai [gradienti olografici](https://gradiently.design/it/guide/holographic-gradients).

## Crepuscolo: gradienti rosa e viola scuri

Scurisci la coppia e diventa subito adulta. Un fondo nero prugna con luce di lampone e violetto sembra il cielo venti minuti dopo il tramonto, o un cocktail bar con luci basse. Sono i più versatili del gruppo e reggono facilmente testo bianco o rosa pallido.

- Venti minuti dopo il tramonto: `linear-gradient(180deg, #1e0b2e 0%, #581c87 50%, #be185d 100%)`
- Bagliore di lampone: `radial-gradient(circle at 80% 85%, #db2777 0%, #4a044e 40%, #12041a 80%)`
- Da prugna a rosa: `linear-gradient(135deg, #2e0a2f 0%, #6b21a8 55%, #f472b6 100%)`
- Luce di scena viola: `radial-gradient(ellipse at 50% 0%, #a855f7 0%, #3b0764 45%, #0c0414 85%)`

Gradienti rosa e viola scuri. Aggiungi una grana fine, perché le fusioni scure fanno banding per prime.

Sono vicini ai [gradienti tramonto](https://gradiently.design/it/guide/sunset-gradient) e ai [gradienti galassia](https://gradiently.design/it/guide/galaxy-gradient), e puoi prendere liberamente da entrambi.

## Aggiungere un terzo colore senza sporcare

La classica diagonale da rosa acceso a violetto è ovunque, quindi un colore in più è il modo più rapido per renderla tua. Scegli un colore vicino al rosa o al viola: arancione e corallo stanno accanto al rosa, blu e indaco accanto al viola. Il verde sta di fronte al magenta, ed è per questo che il rosa verso il verde diventa grigio al centro.

- Violetto, rosa, mandarino: `linear-gradient(120deg, #7c3aed 0%, #ec4899 55%, #fb923c 100%)`
- Ora blu: `linear-gradient(160deg, #1e3a8a 0%, #7e22ce 50%, #f472b6 100%)`
- Magenta con oro: `radial-gradient(circle at 85% 15%, #fcd34d 0%, #a21caf 35%, #2e0a2f 80%)`

Tre gradienti rosa e viola con un terzo colore vicino. Ogni passo resta saturo.

## Come scegliere un gradiente rosa e viola per il tuo brand

1. **Decidi prima chiaro o scuro** Gran parte dell’umore viene dalla luminosità. Una fusione pallida dice gentilezza; un fondo prugna dice sera. Scegline uno e mantienilo per ogni post.
2. **Scegli quale colore guida** Con il rosa che guida sembra più caldo e giocoso. Con il viola che guida sembra più fresco e misterioso. Dai al colore guida circa due terzi della superficie.
3. **Pianifica dove stanno le parole** Metti il titolo sull’estremità più scura e calma e il rosa più luminoso in un angolo, così non devi mai lottare con lo sfondo per l’attenzione.
4. **Provalo a ogni formato** Una fusione che funziona su un post quadrato può mettere la zona più luminosa dietro il testo in una storia. Controlla post, storia e banner prima di decidere.

Se pubblichi spesso, scrivi il risultato come una breve ricetta: fondo, colore guida, accento, dove sta la luce. Quella riga mantiene coerente un intero feed, e conta più di qualsiasi singolo bel gradiente. [La coerenza del brand](https://gradiently.design/it/guide/brand-consistency) approfondisce.

## Colori del testo su rosa e viola

Il rosa acceso è più chiaro di quanto sembri, quindi i titoli bianchi sul rosa acceso sono più deboli di quanto si pensi. Violetto e magenta reggono bene il bianco. All’estremità chiara, un prugna intenso è l’inchiostro che tiene il design in un’unica famiglia. I rapporti sono contrasti WCAG; punta a 4,5:1 per il testo piccolo e a 3:1 come minimo per i titoli grandi. [Contrasto del colore e accessibilità](https://gradiently.design/it/guide/color-contrast-accessibility) spiega le soglie.

| Sfondo | Testo | Contrasto | Verdetto |
| --- | --- | --- | --- |
| Rosa acceso `#ec4899` | Bianco | 3,5:1 | Solo titoli grandi |
| Rosa intenso `#db2777` | Bianco | 4,6:1 | Buono |
| Magenta `#c026d3` | Bianco | 4,7:1 | Buono |
| Violetto `#9333ea` | Bianco | 5,4:1 | Buono |
| Gomma da masticare `#f9a8d4` | Inchiostro prugna `#3b0a3f` | 8,9:1 | Ottimo |
| Inchiostro prugna `#2e0a2f` | Gomma da masticare `#f9a8d4` | 9,6:1 | Ottimo, il rosa come inchiostro |

Misura dietro ogni riga di testo, nel punto più chiaro del gradiente.

Un post verticale per un salone di unghie con scritte bianche su un gradiente saturo rosa e violetto

Un post per un salone di unghie su orchidea satura, testo bianco sul lato violetto.

Una storia verticale per una serata in discoteca con scritte rosa pallido su un gradiente prugna scuro illuminato di lampone in basso

Una storia per una serata in discoteca su crepuscolo prugna con luce di lampone in basso.

## CSS per un gradiente rosa e viola

```css
.dusk {
  background-color: #1e0b2e;
  background-image:
    radial-gradient(circle at 80% 85%, #db2777 0%, transparent 45%),
    linear-gradient(180deg in oklch, #1e0b2e 0%, #581c87 100%);
  color: #fce7f3;
}

.headline-gradient {
  background: linear-gradient(90deg, #ec4899, #9333ea);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
```

Una sezione crepuscolo con un bagliore di lampone e un titolo da rosa a violetto con sfondo ritagliato sul testo.

Il testo con gradiente è d’effetto ma usalo solo per brevi parole di display, mai per il testo corrente. [Testo con gradiente in CSS](https://gradiently.design/it/guide/css-gradient-text) tratta le alternative. Se vuoi un look rosa e viola che nessun altro può pubblicare, il Mercato di Gradiently ti lascia cercare i Mark con parole di colore come «orchidea». Ogni Mark è unico e, una volta riservato, solo tu puoi esportare con esso; inoltre mantiene leggibile il testo su entrambe le estremità della fusione da solo.

## FAQ

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

Un classico è `linear-gradient(135deg, #ec4899 0%, #c026d3 50%, #9333ea 100%)`. Per qualcosa di più cupo, prova `linear-gradient(180deg, #1e0b2e 0%, #581c87 50%, #be185d 100%)`.

### Rosa e viola stanno bene insieme?

Sì. Sono vicini sul cerchio cromatico, con il magenta in mezzo, quindi si fondono bene a qualsiasi luminosità.

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

Il bianco si legge bene su magenta, violetto e prugna scuro. Sul rosa acceso usa il bianco solo per titoli grandi, e sul rosa pallido o sul lilla usa un prugna intenso come `#3b0a3f`.

### Come faccio a rendere un gradiente rosa e viola meno infantile?

Scurisci o aumenta la saturazione, usa un fondo prugna e aggiungi in una piccola zona un terzo colore da adulti come oro o blu profondo.

### Che colore sta tra rosa e viola?

Il magenta, intorno a `#c026d3`, con l’orchidea come sua versione più chiara.