Sfere a gradiente: sfere luminose per hero e copertine

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

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 hanno fondi che stanno bene con ogni sfera qui sopra.

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

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.

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

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 spiega come. Sul web, muovi l’elemento sfocato con transform e spegni il movimento per i visitatori che chiedono di ridurre le animazioni.

Come far sembrare originale una sfera a gradiente

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