Generatore sfumatura CSS

Crea sfumature CSS lineari e radiali visivamente con più punti di colore

Che cos'è e come funziona?

Un generatore di gradienti ti lascia costruire gradienti CSS in modo visivo — scegliendo i colori, posizionando le tappe e scegliendo la direzione — poi ti dà il CSS esatto da incollare nel tuo foglio di stile. Un gradiente è una fusione morbida tra due o più colori, e CSS lo produce senza alcuna immagine, quindi resta nitido a qualsiasi dimensione e non aggiunge peso di download. I due tipi principali sono il lineare, che fonde lungo una linea retta all'angolo che scegli, e il radiale, che fonde verso l'esterno da un punto centrale in cerchio o ellisse.

Scrivere il CSS di un gradiente a mano è macchinoso perché la sintassi stipa direzione, diverse tappe di colore e le loro posizioni in una sola riga, e un piccolo errore produce un bordo netto o l'angolo sbagliato. Costruirlo visivamente e leggere il codice generato elimina quell'attrito: vedi il risultato mentre regoli ogni tappa di colore, poi copi un valore che sai funzionare. Questo strumento genera CSS basato su standard nel browser, pronto per sfondi, pulsanti, sovrapposizioni e intestazioni.

Casi d'uso

• Progettare uno sfondo hero: costruisci un gradiente lineare a più tappe per un'intestazione di pagina e copia il CSS direttamente nel tuo foglio di stile.
• Dare stile a pulsanti o schede: crea un sottile gradiente a due colori per dare profondità a un elemento piatto.
• Fare una sovrapposizione d'immagine: genera un gradiente che sfuma a trasparente così il testo resta leggibile su una foto.

Domande frequenti

Che differenza c'è tra un gradiente lineare e radiale?

Un gradiente lineare fonde i colori lungo una linea retta in una direzione o angolo che imposti, buono per sfondi e barre. Un gradiente radiale fonde verso l'esterno da un punto centrale in cerchio o ellisse, utile per riflettori, bagliori e luci arrotondate.

Cosa sono le tappe di colore?

Le tappe di colore sono i punti lungo il gradiente dove si trova un colore specifico, con una posizione (come 0%, 50%, 100%). Aggiungere più tappe crea fusioni multicolore, e spostare la posizione di una tappa controlla dove un colore lascia il posto al successivo.

I gradienti CSS funzionano ovunque?

Sì, i gradienti lineari e radiali sono ampiamente supportati dai browser moderni, e poiché sono CSS puro non c'è alcuna immagine da caricare. Per browser molto vecchi, un colore di sfondo pieno è un fallback sicuro dietro il gradiente.

Come faccio sfumare un gradiente al trasparente?

Usa un colore con un valore alfa (come un rgba o un hex a 8 cifre che termina in 00) come una tappa. Sfumare da un colore pieno alla sua versione completamente trasparente è il modo standard di creare sovrapposizioni leggibili sopra le immagini.

Colore

Generatore palette colori · Verificatore contrasto · Miscelatore colori · Cercatore nome colore