# Sfere a gradiente: sfere luminose per hero e copertine

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

Una sola sfera luminosa su un fondo scuro può reggere un’intera landing page o la copertina di un album. Sembra facile ed è facile sbagliarla. Ecco le ricette e le regole di posizionamento.

## The short version

- Una sfera a gradiente è una sfera luminosa fatta con un gradiente radiale, di solito un nucleo luminoso che sfuma attraverso un colore saturo in un fondo scuro.
- Le sfere hanno tre stili comuni: un glow morbido senza bordo, una sfera illuminata con bordo netto e un anello d’eclisse con il centro scuro.
- Una sfera brilla in modo convincente solo su un fondo scuro o profondamente colorato, perché il glow è contrasto con ciò che lo circonda.
- Metti la sfera lontano dal titolo, di solito in alto e su un lato, e lascia le parole sul fondo calmo.
- In CSS una sfera è uno strato di gradiente radiale o un elemento circolare sfocato posizionato dietro il contenuto.

Una **sfera a gradiente** è una sfera luminosa fatta con un gradiente radiale: un nucleo luminoso, una banda di colore saturo e una lunga dissolvenza in un fondo scuro. È diventata una favorita per pagine di lancio di prodotti, hero di app, grafiche per podcast e copertine di album, perché una sola forma dà al design un punto focale, profondità e un senso di energia senza una sola foto. La ricetta è breve. Ciò che distingue una sfera d’effetto da una macchia sfocata è il fondo dietro, il colore del nucleo e dove la metti.

## Tre tipi di sfera a gradiente

- **Sfera a glow morbido:** nessun bordo, solo luce che sboccia dal buio. Calma, atmosferica, ideale dietro layout ampi.
- **Sfera illuminata:** un bordo tondo netto con un riflesso su un lato, che si legge come un pianeta o una sfera di vetro. Decisa e grafica. Le regole di illuminazione sono nelle [forme a gradiente](https://gradiently.design/it/guide/gradient-shapes).
- **Anello d’eclisse:** un disco scuro con luce che trabocca attorno al bordo. Drammatico, notturno, popolare per musica e tecnologia.

## Ricette di sfere a gradiente

Ogni ricetta è un singolo `radial-gradient()` che puoi incollare nel CSS o in uno strumento di design. Il primo passaggio è il nucleo, quelli centrali sono il corpo colorato e l’ultimo è il fondo. Spostare più in là il passaggio del fondo allarga il glow.

- Glow viola: `radial-gradient(circle at 50% 50%, #faf5ff 0%, #c4b5fd 10%, #7c3aed 26%, #2e1065 50%, #0b0a1a 75%)`
- Glow ciano: `radial-gradient(circle at 50% 50%, #ecfeff 0%, #67e8f9 9%, #0891b2 24%, #083344 48%, #020617 74%)`
- Glow di brace: `radial-gradient(circle at 50% 50%, #fff7ed 0%, #fdba74 10%, #f43f5e 28%, #4c0519 52%, #0c0507 76%)`
- Glow smeraldo: `radial-gradient(circle at 50% 50%, #f0fdf4 0%, #86efac 8%, #059669 22%, #022c22 46%, #010805 72%)`
- Anello d’eclisse: `radial-gradient(circle at 50% 50%, #0b0a1a 0%, #0b0a1a 24%, #fde68a 25%, #f97316 28%, #7c2d12 38%, #0b0a1a 60%)`
- Glow iridescente: `radial-gradient(circle at 50% 50%, #fdf2f8 0%, #f9a8d4 12%, #a855f7 30%, #3b82f6 46%, #0b1026 70%)`

Sei sfere su fondi scuri. Quella iridescente cambia tonalità mentre sfuma, da rosa a viola a blu, e si legge come una superficie lucida.

Evita un nucleo di bianco puro. Un bianco virato verso il colore della sfera, come `#faf5ff` in una sfera viola, mantiene luminoso il centro senza sembrare bruciato. Evita anche un fondo di nero puro: un quasi nero con una traccia della tonalità della sfera fa sembrare il glow parte dello spazio.

## Perché le sfere hanno bisogno di un fondo scuro

Il glow è contrasto. Su una pagina bianca la stessa sfera viola sembra un livido; su un fondo d’inchiostro profondo sembra luce. Se il tuo brand vive su sfondi chiari, usa una sfera pastello pallida con un calo morbido e ampio e accetta che si legga come una fioritura di colore e non come un glow. Gli [sfondi a gradiente scuro](https://gradiently.design/it/guide/dark-gradient-backgrounds) hanno fondi che stanno bene con ogni sfera qui sopra.

- Fondo inchiostro viola: #0b0a1a
- Fondo inchiostro blu: #020617
- Fondo inchiostro rosso: #0c0507
- Fondo inchiostro verde: #010805

Quattro quasi neri, ciascuno virato verso una sfera. Abbina il fondo alla sfera e il glow appare naturale.

## Dove mettere una sfera a gradiente

Una sfera è la cosa più luminosa dell’inquadratura, quindi attira lo sguardo prima di tutto il resto. È un regalo se il titolo le sta accanto e un problema se le sta sopra. Metti la sfera in alto e su un lato, tagliala al bordo se è grande e tieni le parole sul fondo scuro e calmo. Non usare mai una sfera come glow dietro il testo: abbassa il contrasto proprio dove serve di più.

- Hero di sito 1920×1080: 1920 × 1080
- Post Instagram 1080×1350: 1080 × 1350
- Copertina playlist 1080×1080: 1080 × 1080
- Storia 1080×1920: 1080 × 1920

In un hero largo metti la sfera sul lato opposto al titolo. Nei formati alti mettila nel terzo superiore con le parole sotto.

Una copertina quadrata di podcast con una luce viola luminosa in alto nell’inquadratura e il titolo del programma sotto, su fondo scuro

Una copertina di podcast da 3000×3000. La luce sta sopra il titolo, mai sotto.

Un ampio banner di lancio di un prodotto con il titolo a sinistra e un’area luminosa e splendente a destra

Un hero di lancio da 1920×1080, con le parole a sinistra e l’area più luminosa a destra.

## Un hero con sfera a gradiente in CSS

Il metodo più semplice è uno strato di gradiente radiale sulla sezione stessa. Per un glow più morbido e organico usa un elemento circolare separato con una forte sfocatura, che permette anche di animarlo lentamente senza ridisegnare l’intera sezione.

```css
.hero {
  position: relative;
  min-height: 80vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 30%, #faf5ff 0%, #c4b5fd 6%, #7c3aed 16%, #2e1065 34%, transparent 55%),
    #0b0a1a;
  color: #f5f3ff;
}

/* Optional: a soft second light, blurred */
.hero::before {
  content: "";
  position: absolute;
  width: 40vmax;
  aspect-ratio: 1;
  left: -12vmax;
  bottom: -18vmax;
  border-radius: 50%;
  background: radial-gradient(circle, #0891b2 0%, transparent 65%);
  filter: blur(40px);
  opacity: 0.55;
  pointer-events: none;
}

.hero > * {
  position: relative;
}
```

Una sfera viola in alto a destra su un fondo d’inchiostro, con una debole luce ciano che entra dal basso a sinistra. Il contenuto sta sopra entrambe.

> **Le grandi sfocature hanno un costo** Un grande `filter: blur()` su un elemento in movimento può far perdere fotogrammi sui telefoni più vecchi. Anima solo `transform`, tieni modesto il raggio di sfocatura e leggi le [prestazioni dei gradienti CSS](https://gradiently.design/it/guide/css-gradient-performance) prima di pubblicare.

## Animare una sfera a gradiente

Una sfera che scivola di qualche punto percentuale nell’inquadratura, o che respira diventando un po’ più grande e più piccola, sembra viva senza distrarre dalle parole. Tieni il ciclo lungo, tra 10 e 20 secondi, e usa un’accelerazione dolce in entrata e in uscita perché il movimento non sembri mai partire o fermarsi. Nei formati social esportala come breve loop in cui l’ultimo fotogramma coincide con il primo: il [video in loop senza giunture](https://gradiently.design/it/guide/seamless-loop-video) spiega come. Sul web, muovi l’elemento sfocato con `transform` e spegni il movimento per i visitatori che chiedono di [ridurre le animazioni](https://gradiently.design/it/guide/reduced-motion).

## Come far sembrare originale una sfera a gradiente

### Sfera generica

- Da viola a blu, al centro, su nero
- Nucleo di bianco puro che si brucia
- Messa dietro il titolo
- Perfettamente liscia, con banding nella dissolvenza

### Sfera curata

- Un colore del brand con uno scarto di tonalità nel calo
- Un nucleo virato che resta luminoso
- Decentrata, tagliata, con parole su fondo calmo
- Grana fine sulla dissolvenza per mantenerla liscia

La sfera è ormai abbastanza comune che una versione predefinita sembra un template. Una seconda luce più debole, uno scarto di tonalità nel calo o uno strato di [grana](https://gradiently.design/it/guide/grainy-gradients) la portano verso qualcosa di riconoscibile. I Mark di Gradiently vanno oltre: ognuno è uno sfondo vivo con la sua luce, i suoi materiali e il suo movimento, controllato perché non ce ne siano due uguali, e si disegna a ogni misura in cui progetti. Sfoglia i Mark scuri nel Mercato e progetta gratis con uno qualsiasi non ancora riservato.

## FAQ

### Come si crea una sfera a gradiente?

Usa un gradiente radiale con un nucleo bianco virato, una banda di colore saturo e un fondo scuro, per esempio `radial-gradient(circle, #faf5ff 0%, #c4b5fd 10%, #7c3aed 26%, #2e1065 50%, #0b0a1a 75%)`.

### Quale sfondo sta meglio dietro una sfera a gradiente?

Un quasi nero virato verso il colore della sfera. Il glow si legge come glow solo contro un contorno scuro.

### Posso mettere del testo sopra una sfera a gradiente?

Meglio di no. La sfera è la parte più luminosa dell’inquadratura, quindi il testo sopra di lei perde contrasto. Metti la sfera su un lato e tieni le parole sul fondo calmo.

### Come si crea una sfera sfocata in CSS?

Crea un elemento circolare con un gradiente radiale che sfuma verso il trasparente, poi applica `filter: blur()`. Posizionalo in modo assoluto dietro il contenuto.