Generatore di gradienti CSS
Disegna un gradiente lineare, radiale o conico, guardalo aggiornarsi in tempo reale e copia la regola CSS background.
Funziona interamente nel tuo browser
Punti colore
Preset
I colori dei punti possono essere qualsiasi colore che il tuo browser capisce (HEX, nomi, rgb(), hsl(), oklch()). Fino a 10 punti. Le posizioni sono percentuali; l'output è CSS semplice senza prefissi dei browser.
Come creare un gradiente CSS
- Scegli Lineare, Radiale o Conico, oppure parti da un preset.
- Imposta l'angolo o la posizione, poi modifica i punti colore: cambia colore e posizione di ciascuno, aggiungi punti e spostali su o giù.
- Premi Copia CSS e incolla la regola nel tuo foglio di stile. Seleziona l'opzione di riserva se vuoi una riga con un colore pieno prima.
Leggere un gradiente CSS
Un gradiente CSS è un'immagine che il browser disegna da sé, quindi si adatta a qualsiasi dimensione e non costa nessun download. Un gradiente lineare sfuma i colori lungo una linea stabilita da un angolo. Un gradiente radiale sfuma verso l'esterno a partire da un punto centrale, in un cerchio o in un'ellisse. Un gradiente conico fa girare i colori attorno a un centro come la lancetta di un orologio, ed è la scelta naturale per grafici a torta e ruote di colori.
Ogni punto colore è un colore più una posizione lungo la linea del gradiente, scritta come percentuale. Tra due punti il browser sfuma in modo graduale. Se due punti hanno la stessa posizione, la sfumatura non ha larghezza e si ottiene un bordo netto. Se un punto è collocato prima di quello che lo precede, i browser lo trattano come se fosse alla posizione del punto precedente, ed è per questo che questo strumento permette di riordinare e ordinare i punti.
La regola è scritta come background: quindi funziona su qualsiasi elemento. I gradienti sono disegnati sullo sfondo, quindi il testo sopra di essi richiede la stessa attenzione al contrasto del testo su un colore piatto: controlla separatamente le parti più chiare e più scure della sfumatura.
Suggerimenti
- Scegli colori dei punti che stiano bene insieme con il Generatore di palette di colori.
- Converti un punto tra HEX, RGB e HSL nel Convertitore di colori e contrasto.
- Stai pubblicando il foglio di stile? Riducilo con Minifica e indenta CSS.
Domande frequenti
Cosa significa l'angolo in un gradiente lineare?
0deg punta verso l'alto, quindi il gradiente va dal bordo inferiore verso l'alto. 90deg va da sinistra a destra, 180deg dall'alto al basso e 270deg da destra a sinistra. 360deg è la stessa direzione di 0deg. Lo strumento scrive il numero che inserisci con l'unità deg.
Come ottengo un bordo netto invece di una sfumatura morbida?
Dai a due punti vicini la stessa posizione. Per esempio, rosso al 50% seguito da blu al 50% cambia colore a metà senza sfumatura. Il preset Strisce nette lo mostra.
Cosa fa l'opzione ripetuto?
Scrive repeating-linear-gradient, repeating-radial-gradient o repeating-conic-gradient. Il motivo tra il primo e l'ultimo punto viene ripetuto a mosaico, quindi si vede solo quando l'ultimo punto è prima del 100%. Prova punti a 0%, 10% e 20% per ottenere delle strisce.
A cosa serve la riga con il colore pieno di riserva?
Un browser che non riesce a leggere il gradiente ignora quella riga e mantiene la precedente. I browser che supportano i gradienti, cioè quasi tutti quelli in uso, la sovrascrivono. Il colore di riserva è quello del tuo primo punto.
Quali formati di colore sono accettati?
Tutto ciò che la proprietà CSS color accetta nel tuo browser: #1636a3, tomato, rgb(22 54 163), hsl(226 76% 36%) o oklch(0.5 0.2 260). Digitare qualcos'altro mostra un messaggio e lascia sullo schermo l'ultimo gradiente valido.
Un gradiente conico ha bisogno di una posizione?
Ha sempre un centro, e questo strumento lo scrive in percentuali, quindi 50% 50% è il centro del riquadro. L'angolo iniziale ruota il punto in cui parte lo sweep del colore, misurato in senso orario dall'alto.