Gradienti con rumore: colore liscio con finitura granulosa

Un gradiente con rumore è una sfumatura di colore liscia con sopra uno strato fine di rumore casuale, così il colore sembra stampato e non generato. La sfumatura ti dà il colore e la direzione della luce; il rumore ti dà una superficie e impedisce alla sfumatura di spezzarsi in bande. Qui sotto trovi cinque ricette da copiare, poi una spiegazione semplice di ogni impostazione del generatore, così puoi creare le tue.

Cinque ricette di gradienti con rumore

Ogni ricetta è un gradiente di base e un’impostazione del rumore. I gradienti sono mostrati qui senza rumore così puoi vedere il colore; la tabella sotto indica il rumore da aggiungere sopra. Sono volutamente diversi tra loro: uno scuro, uno chiaro, uno caldo, uno freddo, uno audace.

Le impostazioni di un generatore di gradienti con rumore spiegate

Ogni generatore di gradienti con un’opzione di rumore, e ogni filtro SVG di rumore, usa una versione degli stessi controlli. Una volta che sai cosa fa ciascuno puoi leggere qualsiasi ricetta e correggere qualsiasi risultato.

Come fare un gradiente con rumore in CSS

Il metodo più pulito sovrappone un’immagine di rumore SVG al tuo gradiente in una sola dichiarazione background, poi li fonde. Sostituisci il gradiente con una qualsiasi delle ricette sopra e imposta frequenza e opacità dalla tabella.

.noise-gradient {
  position: relative;
  isolation: isolate;
  background: radial-gradient(circle at 70% 25%, #8b5cf6 0%, #3b1a78 40%, #0e0820 80%);
}

.noise-gradient::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* Recipe 1: frequency 0.85, 3 octaves */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: 0.08;
}

Il metodo a puntini ad alto contrasto

Per un aspetto più audace, quasi da risografia, metti il rumore e il gradiente nello stesso strato e passali attraverso un filtro di contrasto. Il rumore si schiaccia in puntini duri che seguono la luce del gradiente. È più rumoroso della ricetta 3, quindi usalo per poster e banner hero, non dietro il testo del corpo.

.speckle {
  background:
    linear-gradient(160deg, #ff7a3d 0%, transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
  filter: contrast(170%) brightness(1000%);
  mix-blend-mode: multiply; /* over a coloured parent, e.g. #5b2a86 */
}

Scegliere il rumore giusto per il formato

Il rumore è relativo alla tela. Lo stesso filtro appare fine su una storia da telefono e grosso su un piccolo banner, quindi scala la frequenza sul formato anziché riusare ovunque lo stesso file.

• Storie e post: frequenza intorno a 0,8, opacità dall’8 al 14 per cento. Un po’ più di quanto pensi, perché i caricamenti la ammorbidiscono.
• Hero di siti web: frequenza da 0,7 a 0,9, opacità dal 4 al 10 per cento. Vedi sfondi per hero di siti web.
• Poster per la stampa: grana più grossa, frequenza da 0,5 a 0,7 alla dimensione finale in pixel, così sopravvive alla stampa.
• Sfondi scuri: dimezza la quantità abituale. Gli sfondi a gradiente scuro spiega perché le ombre mostrano per prime la grana.

Gradiente con rumore o gradiente con grana

Sono la stessa idea con un’enfasi diversa. Si dice gradiente con grana quando si intende l’aspetto, e gradiente con rumore quando si intende come è fatto. I gradienti con grana spiega perché la grana funziona e dove metterla; questa pagina è il ricettario. Se vuoi la texture senza una sfumatura di colore, parti invece da la texture di grana.

Se preferisci non regolare affatto i cursori, ogni Mark di Gradiently porta con sé la propria impostazione di grana insieme a colori, luce e movimento, resa da capo a ogni dimensione così il rumore non si allunga né si sfoca mai. Progetta gratis con qualsiasi Mark non riservato.