Usare un generatore di gradienti senza somigliare agli altri

Un generatore di gradienti è uno strumento che costruisce un gradiente per te: scegli o estrai a caso i colori, imposti una direzione ed esporta codice CSS o un’immagine. È il modo più veloce per ottenere una bella sfumatura. È anche il motivo per cui tanti siti, post e presentazioni condividono gli stessi sfondi dal viola al rosa o dal blu al ciano. Il problema non è il generatore. È usare la sua prima risposta.

Questa guida spiega perché i risultati dei generatori convergono e ti accompagna in sei modifiche che rendono un risultato tuo. Per alcune ti serviranno le basi dei gradienti lineari in CSS.

Cosa fa davvero un generatore di gradienti

La maggior parte dei generatori fa tre cose. Sceglie due o più colori, da un selettore, da un’estrazione casuale o da una libreria di palette popolari. Imposta un tipo e una direzione, di solito lineare a un certo angolo. E scrive il codice, di solito un solo valore linear-gradient(), a volte con un’esportazione in PNG o SVG. Alcuni strumenti più recenti creano gradienti mesh o a macchie, e alcuni accettano un prompt di testo.

Perché i risultati dei generatori si somigliano tutti

• Due arresti di default. Le sfumature a due colori sono le più semplici da generare e le più facili da riconoscere come generiche.
• Lo stesso angolo. 135 gradi, da in alto a sinistra a in basso a destra, è un valore predefinito comune e non si adatta a quasi niente in particolare.
• Palette popolari. Le librerie mettono in evidenza per prime le combinazioni più copiate, quindi i gradienti più usati vengono usati ancora di più.
• Saturazione al massimo. I selettori casuali e i preset tendono ai colori vivaci, che fanno colpo in una miniatura e risultano aspri dietro il testo.
• Nessun materiale. Un gradiente nudo è liscio, digitale e piatto. Quasi ogni gradiente generato condivide questa finitura.

Nessuna di queste cose è sbagliata di per sé. Insieme producono un aspetto che appartiene a tutti, il contrario di ciò che serve a un brand. Il branding con i gradienti spiega perché conta oltre il gusto.

Sei modifiche che rendono tuo un gradiente generato

1. 1

   Parti dai tuoi colori

   Incolla i colori del tuo brand, o colori prelevati da una foto che ti piace, invece di estrarne a caso. Ricavare una palette da un’immagine è una buona fonte.

2. 2

   Aggiungi un terzo arresto e spostalo

   Un colore centrale affine al 40% o al 60%, non al 50%, dà forma alla sfumatura. Ora la sfumatura pende da un lato, e si legge come luce e non come riempimento.

3. 3

   Cambia l’interpolazione

   Sfumare in OKLCH mantiene vivi i colori al centro ed evita le macchie grigie. Vedi i gradienti OKLCH.

4. 4

   Adatta la direzione al layout

   Punta la luce dove sta il contenuto. Una caduta verticale si adatta a una storia, un orizzonte basso a un banner, un alone radiale a una foto di prodotto.

5. 5

   Aggiungi grana o un materiale

   Uno strato di rumore fine nasconde il banding e dà tessitura alla superficie. È la via più rapida dal digitale al tattile.

6. 6

   Ritaglia, non limitarti a riempire

   Usa una sezione di un gradiente più grande, o ingrandiscilo perché si veda una sola transizione morbida. Ritagliare cambia la sensazione più che cambiare i colori.

Dall’output del generatore al codice di produzione

I generatori spesso esportano più del necessario, o meno. Controlla il codice prima di incollarlo: i browser moderni non richiedono più i prefissi dei produttori per i gradienti, e conviene aggiungere un colore pieno di riserva per il raro caso in cui il gradiente non venga renderizzato.

/* Edited generator output: solid fallback, own colours, OKLCH blend */
.hero {
  background-color: #1e2a5a;
  background-image: linear-gradient(in oklch 170deg, #1e2a5a 0%, #4f46e5 60%, #f0abfc 100%);
}

Se il gradiente andrà usato in un’email, come immagine social o in stampa, esporta un’immagine invece del CSS. Per le immagini, genera alla dimensione finale, aggiungi la grana prima di esportare e salva in PNG per evitare le fasce di compressione.

Prova prima di pubblicare

La maggior parte dei gradienti fallisce sul contrasto, non sul colore. Metti sopra il tuo titolo vero e controllalo nel punto più chiaro dietro il testo. Il testo su un gradiente spiega come.

Quando un generatore non basta

Un generatore ti dà il colore. Non ti dà una superficie con materiale, luce e movimento, e non può promettere che nessun altro stia usando lo stesso risultato. Se vuoi un gradiente che ti appartenga, ti serve qualcosa che lo confronti con quelli di tutti gli altri.

È così che funziona la Forge di Gradiently. Descrivi un look in una frase o costruiscilo controllo per controllo: fino a otto colori, fino a tre materiali sovrapposti, luce, grana e movimento. Prima che un nuovo Mark venga pubblicato, viene confrontato con tutti gli altri Mark, e ciò che gli somiglia troppo viene rifiutato. Il risultato viene renderizzato dal vivo dietro i tuoi design e può avere un solo proprietario.

GR·M0K1·EJ

Veiled Salon

Vedi questo Mark