Generatore di gradienti CSS: scrivili a mano o con uno strumento

Un generatore di gradienti CSS ti dà un valore da incollare, come linear-gradient(135deg, #1e1b4b 0%, #6d28d9 100%), dopo che hai scelto i colori e un angolo. È un ottimo punto di partenza. Ma un gradiente CSS è abbastanza breve da scriverlo a mano in meno di un minuto, ed è nel codice scritto a mano che stanno i miglioramenti: un terzo punto, uno spazio colore migliore, un secondo livello. Questa pagina mostra come leggere l'output di un generatore, ripulirlo e scrivere il tuo.

Le quattro parti di ogni gradiente CSS

.hero {
  background-image: linear-gradient(
    160deg            /* 1. direction: an angle or "to right" */
    in oklch,         /* 2. optional: the colour space to blend in */
    #1e1b4b 0%,       /* 3. colour stops: colour and position */
    #6d28d9 55%,
    #f472b6 100%
  );
}

/* 4. the type: linear, radial or conic */
.glow { background-image: radial-gradient(circle at 80% 20%, #f472b6, #1e1b4b 70%); }
.dial { background-image: conic-gradient(from 90deg, #6d28d9, #f472b6, #6d28d9); }

Ogni tipo ha la sua guida: gradienti lineari, gradienti radiali e gradienti conici.

Ricette di gradienti da copiare

Sono scritte a mano, non generate, e ognuna usa un'idea che un generatore semplice raramente ti dà: una luce fuori centro, tre punti invece di due o uno spazio colore scelto. Clicca su uno qualsiasi per copiarlo.

Come ripulire l'output di un generatore

Incolla da un generatore vecchio e potresti ottenere cinque righe dove ne basta una. I gradienti con prefisso e il filtro di Internet Explorer sono superflui da anni; aggiungono peso e, nel caso della vecchia sintassi -webkit-, usano un sistema di angoli diverso che confonde chiunque modifichi dopo.

.hero {
  background-color: #1e1b4b; /* shows while loading and if the gradient fails */
  background-image: linear-gradient(160deg, #1e1b4b 0%, #6d28d9 55%, #f472b6 100%);
}

Anche il tuo browser è un discreto generatore. Apri gli strumenti per sviluppatori, seleziona l'elemento e clicca su una qualsiasi campionatura di colore dentro il gradiente nel pannello Stili: ottieni un selettore di colore per quel punto e puoi modificare angoli e percentuali sul posto mentre la pagina si aggiorna in tempo reale. Copia il valore finito nel tuo foglio di stile. Per mettere a punto un gradiente su contenuti reali è meglio di qualsiasi strumento a parte, perché lo vedi dietro il tuo titolo vero.

Cinque modifiche che battono qualsiasi cursore

1. 1

   Aggiungi un punto centrale

   Due punti danno una rampa dritta. Un terzo colore intorno al 50-60 percento aggiunge profondità e ti fa controllare dove avviene il cambio.

2. 2

   Scegli lo spazio colore

   Aggiungi in oklab per mantenere puliti i passaggi tra colori lontani, o in oklch per far viaggiare la tonalità. L'interpolazione dei gradienti mostra la differenza.

3. 3

   Sposta la luce fuori centro

   Sostituisci un gradiente lineare con radial-gradient(circle at 80% 20%, ...) così il colore più luminoso arriva da un angolo, come una sorgente di luce.

4. 4

   Sovrapponi due o tre gradienti

   Separa più valori con la virgola in background-image. Bagliori radiali su una base lineare sembrano molto più ricchi di un solo gradiente; i gradienti mesh in CSS vanno oltre.

5. 5

   Aggiungi un po' di grana

   Un leggero livello di rumore nasconde le bande sui gradienti grandi e scuri. Il codice è in texture a rumore in CSS.

.hero {
  background-color: #0f0b1e;
  background-image:
    radial-gradient(circle at 80% 15%, #f472b6 0%, transparent 40%),
    radial-gradient(circle at 15% 85%, #4338ca 0%, transparent 45%),
    linear-gradient(160deg, #0f0b1e 0%, #1e1640 100%);
}

Trasformare un gradiente in un token riutilizzabile

Quando un gradiente è giusto, dagli un nome. Una proprietà personalizzata contiene l'intero valore, così pulsanti, banner e hero possono condividerlo e un restyling tocca una sola riga. Variabili CSS per i temi mostra come cambiare i token di gradiente per brand o modalità.

:root {
  --gradient-brand: linear-gradient(160deg, #1e1b4b 0%, #6d28d9 55%, #f472b6 100%);
}

.hero { background-image: var(--gradient-brand); }
.badge { background-image: var(--gradient-brand); }

Quando un generatore non è lo strumento giusto

Generatori e CSS scritto a mano hanno lo stesso limite: il risultato è un elenco di punti che chiunque può leggere nel tuo foglio di stile e riutilizzare. Va bene per i dettagli dell'interfaccia. Per lo sfondo con cui ti riconoscono, sul tuo sito e in ogni post, forse vuoi qualcosa di più ricco e più difficile da copiare. Il consiglio più ampio è in come usare un generatore di gradienti.

I Mark di Gradiently vanno oltre ciò che il CSS sa descrivere: materiali sovrapposti, luce, grana e movimento, resi in tempo reale a ogni dimensione, con un solo proprietario alla volta. Puoi progettare con qualsiasi Mark non ancora riservato gratis e cercare nel Mercato con parole di colore per trovarne uno vicino al gradiente che stavi cercando di scrivere.