Gradienti sfocati: colore soft focus che sa di moderno

Un gradiente sfocato è colore senza bordi: qualche forma morbida su un fondo, sfocata finché resta solo luce che scivola da una tinta alla successiva. Sembra una fotografia scattata attraverso un vetro smerigliato, o un obiettivo messo fuori fuoco su una città illuminata. Quella morbidezza è il motivo per cui va bene per app di benessere, musica, skincare, tecnologia calma e sfondi. Il metodo è semplice: prima le forme, poi molta sfocatura, poi la grana. I dettagli qui sotto fanno la differenza tra sognante e sbavato.

Gradienti sfocati contro gradienti aurora e mesh

Questi tre si confondono perché sembrano tutti morbidi. Nascono da idee diverse, e scegliere quello giusto cambia il progetto.

Come fare un gradiente sfocato

1. 1

   Scegli un fondo

   Un bianco sporco pallido per un effetto arioso, un inchiostro scuro per uno luminoso. Il fondo riempie ogni vuoto lasciato dalle forme.

2. 2

   Scegli tre o quattro colori vicini

   I colori vicini sulla ruota, come rosa, lilla e azzurro, si fondono in sfumature intermedie pulite. Leggi i colori analoghi per altre combinazioni.

3. 3

   Disegna forme grandi e sovrapposte

   Da tre a cinque cerchi o ovali, ognuno a coprire da un quarto a metà della tela. Lascia che alcuni escano dai bordi.

4. 4

   Sfoca con decisione

   Applica una sfocatura gaussiana di circa il 10-20 per cento del lato più corto della tela. Su un post largo 1080 pixel, sono circa 110-220 pixel.

5. 5

   Aggiungi la grana

   Uno strato di rumore fine con opacità del 3-6 per cento nasconde il banding e impedisce che il risultato sembri plastificato.

6. 6

   Controlla alla dimensione del telefono

   Rimpiccioliscilo. Se una forma ha ancora un bordo visibile, sfoca di più o ingrandisci la forma.

Ricette di colore per gradienti sfocati

Ogni campione approssima il look finito in un solo gradiente, così puoi copiarlo direttamente nel CSS o usare i colori come forme. I gradienti radiali ellittici con posizioni fuori centro si avvicinano sorprendentemente a una vera sfocatura.

Scegli la famiglia in base a ciò che ci sta sopra. Le sfocature chiare portano bene il testo scuro e vanno per skincare, cartoleria, benessere e copertine editoriali. Quelle scure fanno brillare il testo chiaro e vanno per vita notturna, musica ed eventi serali. Una sfocatura neutra come il lino funziona da sfondo discreto per foto di prodotto, dove il colore non deve mai competere con l’oggetto. Per altre palette morbide, vedi i gradienti sognanti.

Quanta sfocatura serve a un gradiente sfocato

La maggior parte dei gradienti sfocati fallisce perché non è abbastanza sfocata. Una forma sfocata di 30 pixel su una tela di 1080 pixel è ancora una forma con un bordo morbido, che si legge come una macchia. Il look richiede una sfocatura tanto grande da non capire dove finisce una forma.

Un gradiente sfocato in CSS

Sul web hai due strade. I gradienti radiali sovrapposti che sfumano in trasparente sono economici e si disegnano subito. Gli elementi realmente sfocati sembrano più morbidi e possono muoversi, ma costano di più da disegnare. Per uno sfondo statico, gli strati di solito bastano.

/* Route 1: layered radial gradients, no filter */
.blurry {
  background-color: #f8fafc;
  background-image:
    radial-gradient(ellipse 60% 50% at 20% 25%, #fbcfe8 0%, transparent 70%),
    radial-gradient(ellipse 55% 60% at 80% 30%, #e9d5ff 0%, transparent 70%),
    radial-gradient(ellipse 70% 55% at 50% 85%, #bfdbfe 0%, transparent 70%);
}

/* Route 2: real shapes, blurred */
.blurry-live {
  position: relative;
  overflow: hidden;
  background: #f8fafc;
}
.blurry-live .blob {
  position: absolute;
  width: 50vmax;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.8;
}
.blurry-live .blob:nth-child(1) { background: #fbcfe8; left: -10vmax; top: -10vmax; }
.blurry-live .blob:nth-child(2) { background: #e9d5ff; right: -12vmax; top: 0; }
.blurry-live .blob:nth-child(3) { background: #bfdbfe; left: 20%; bottom: -20vmax; }

Se ti serve un pannello smerigliato sopra uno sfondo sfocato e non lo sfondo stesso, si tratta di backdrop-filter, trattato in il backdrop filter in CSS.

Perché i gradienti sfocati sembrano dozzinali, e il rimedio

Il banding è quello che sorprende tutti, perché una sfocatura crea sfumature lunghe e dolci su molti pixel. Un po’ di grana lo risolve; il banding nei gradienti ne spiega il motivo. E se due dei tuoi colori si incontrano nel grigio, sostituisci uno con un vicino, come descritto in i gradienti fangosi.

I Mark di Gradiently includono materiali morbidi e diffusi con la grana già integrata, e mantengono calma l’area dietro le tue parole, così un look sfocato non inghiotte mai il titolo. Puoi progettare gratis con qualsiasi Mark non riservato nello Studio.