Generatore di proprietà CSS: gradienti, ombre e bordi

Un generatore di proprietà CSS è uno strumento che crea codice CSS per un effetto visivo a partire da cursori e selettori di colore, invece di richiedere all'utente di scrivere il codice manualmente. Questo strumento supporta quattro effetti: gradienti, ombre del riquadro (box shadow), raggio del bordo e ombre del testo. Ogni pannello mostra un'anteprima in tempo reale e produce codice CSS pronto da copiare.

Cosa genera

• Gradienti: transizioni lineari o radiali tra due colori
• Ombre del riquadro (box shadow): un'ombra esterna o interna attorno a un elemento, con controlli per spostamento, sfocatura, estensione, colore e opacità
• Raggio del bordo: angoli arrotondati, uguali per tutti e quattro gli angoli oppure impostati singolarmente
• Ombre del testo: un'ombra dietro al testo, con controlli per spostamento, sfocatura, colore e opacità

Ogni impostazione aggiorna contemporaneamente l'anteprima e il CSS generato, così le modifiche possono essere verificate prima di copiare il codice.

Come calcolare un gradiente lineare CSS

Un gradiente lineare passa da un colore a un altro lungo una linea retta. La sintassi CSS è:

1background: linear-gradient(angle, color1 position1%, color2 position2%);
2

L'angolo viene misurato in gradi, da 0 a 360. position1 e position2 indicano il punto in cui ciascun colore raggiunge la massima intensità, espresso come percentuale della lunghezza del gradiente.

Esempio

I valori iniziali del generatore sono un angolo di 90 gradi, #ff5f6d a 0% e #ffc371 a 100%. Il risultato è:

1background: #ff5f6d;
2background: linear-gradient(90deg, #ff5f6d 0%, #ffc371 100%);
3

La prima riga è un colore semplice di riserva per i browser che, per qualche motivo, non riescono a visualizzare il gradiente. La seconda riga è il gradiente vero e proprio.

Formula del gradiente radiale

Un gradiente radiale si espande da un punto centrale invece di seguire una linea:

1background: radial-gradient(circle, color1 position1%, color2 position2%);
2

Questo generatore produce sempre un gradiente radiale circolare. Non offre un'opzione per usare una forma ellittica né un modo per spostare il punto centrale; è possibile modificare soltanto i due colori e le relative posizioni di arresto.

Entrambi i tipi di gradiente disponibili nello strumento usano esattamente due colori, impostati con i selettori Colore 1 e Colore 2. Non è possibile aggiungere una terza posizione di colore.

Formula dell'ombra del riquadro CSS

Un'ombra del riquadro è un'ombra disegnata attorno ai bordi di un elemento:

1box-shadow: h-offset v-offset blur spread color;
2

h-offset e v-offset spostano l'ombra a sinistra o a destra e verso l'alto o verso il basso. I valori positivi la spostano verso destra o verso il basso; quelli negativi verso sinistra o verso l'alto. blur rende più sfumato il bordo dell'ombra; un numero maggiore estende ulteriormente la sfumatura. spread aumenta o riduce le dimensioni dell'ombra prima dell'applicazione della sfocatura. Aggiungendo la parola chiave inset prima degli spostamenti, l'ombra viene disegnata all'interno del bordo dell'elemento anziché all'esterno.

Esempio

Con le impostazioni predefinite (spostamento orizzontale di 5px, spostamento verticale di 5px, sfocatura di 10px, estensione di 0px, nero con opacità del 20%), lo strumento produce:

1box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.2);
2

Il cursore dell'opacità del selettore di colore va da 0 a 100 e viene convertito nella scala da 0 a 1 usata da rgba(), quindi il 20% diventa 0.2.

Formula del raggio del bordo CSS

Il raggio del bordo arrotonda gli angoli di un elemento. Esistono due forme:

1border-radius: value;                              /* uguale per tutti e quattro gli angoli */
2border-radius: top-left top-right bottom-right bottom-left; /* impostato separatamente */
3

Quando tutti e quattro gli angoli condividono un unico valore, il generatore usa la forma abbreviata. Quando i valori sono diversi, li elenca nell'ordine esatto: in alto a sinistra, in alto a destra, in basso a destra, in basso a sinistra.

Esempio

Il raggio predefinito è di 10px per ogni angolo:

1border-radius: 10px;
2

Un'immagine avatar circolare usa in genere border-radius: 50%, anche se questo valore non rientra nell'intervallo consentito dal cursore del generatore (da 0 a 100 pixel).

Formula dell'ombra del testo CSS

L'ombra del testo funziona come un'ombra del riquadro, ma non ha un valore di estensione e si applica alle lettere anziché al riquadro dell'elemento:

1text-shadow: h-offset v-offset blur color;
2

Esempio

Con le impostazioni predefinite (spostamento orizzontale di 2px, spostamento verticale di 2px, sfocatura di 3px, nero con opacità del 50%):

1text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
2

Quali codici colore accetta il generatore

Ogni controllo del colore include un campione e una casella di testo. La casella di testo accetta un codice colore esadecimale, cioè la forma con # usata in tutto il CSS. Sono valide quattro lunghezze: tre cifre (#f00), quattro cifre (#f00c), sei cifre (#ff0000) e otto cifre (#ff0000cc). Le forme brevi indicano lo stesso colore delle forme estese, perché ogni cifra viene raddoppiata: #123 equivale a #112233.

L'ultima cifra della forma a quattro cifre e l'ultima coppia della forma a otto cifre impostano la trasparenza. I generatori di ombre ignorano questi valori e usano invece il valore alfa del cursore Opacità, così il cursore mostra sempre la trasparenza effettivamente applicata. Se la casella di testo contiene qualcosa che non è un colore esadecimale, ad esempio un codice digitato solo parzialmente, l'ombra torna al nero invece di produrre una dichiarazione non valida.

Come usare il generatore di proprietà CSS

1. Selezionare una scheda: Gradiente, Ombra del riquadro, Raggio del bordo o Ombra del testo.
2. Regolare i cursori, i selettori di colore e le caselle di controllo. Ogni cursore ha accanto una casella numerica in cui inserire un valore esatto. Il pannello dell'anteprima e il codice CSS si aggiornano immediatamente.
3. Selezionare il pulsante "Copia negli appunti" e incollare il codice in un foglio di stile o in un attributo style.
4. Selezionare "Reimposta" per riportare ogni campo delle quattro schede al valore iniziale. Questa operazione riporta anche la scheda attiva a Gradiente, anche se era visualizzata una scheda diversa.

Domande frequenti

A cosa serve un generatore di proprietà CSS?
Converte i valori inseriti tramite cursori e selettori di colore in codice CSS completo per gradienti, ombre e angoli arrotondati, evitando di dover scrivere o memorizzare manualmente la sintassi.

Qual è la differenza tra un gradiente lineare e uno radiale?
Un gradiente lineare cambia colore lungo una linea retta con un angolo determinato. Un gradiente radiale cambia colore espandendosi da un punto centrale. L'opzione radiale di questo strumento usa sempre una forma circolare.

Questo strumento può creare un gradiente con più di due colori?
No. Entrambi i pannelli dei gradienti, lineare e radiale, supportano esattamente due colori, Colore 1 e Colore 2, ciascuno con la propria posizione di arresto.

In cosa differisce un'ombra interna da un'ombra normale?
Un'ombra normale si trova all'esterno dei bordi dell'elemento, come se la luce proiettasse l'ombra dietro di esso. Un'ombra interna si trova invece all'interno dei bordi e fa apparire l'elemento incassato anziché rialzato.

Perché i valori degli angoli arrotondati compaiono nell'ordine in alto a sinistra, in alto a destra, in basso a destra, in basso a sinistra?
Questo è l'ordine previsto dalla proprietà CSS border-radius quando vengono scritti quattro valori separati: si procede in senso orario partendo dall'angolo in alto a sinistra.

Il CSS generato funziona in tutti i browser?
I gradienti, le ombre del riquadro, il raggio del bordo e le ombre del testo sono supportati dalle versioni attuali di Chrome, Firefox, Safari ed Edge. Nell'output non vengono aggiunti prefissi specifici dei produttori.

Riferimenti

1. MDN Web Docs: Uso dei gradienti CSS
2. MDN Web Docs: box-shadow
3. MDN Web Docs: border-radius
4. MDN Web Docs: text-shadow