Sviluppatore / CSS
Generatore di gradienti CSS
Progetta un gradiente lineare, radiale o conico con anteprima in tempo reale, tutti i punti colore che ti servono e modelli predefiniti, poi copia il CSS.
Generatore di gradienti CSS: Il generatore scrive la dichiarazione background necessaria al browser per creare il gradiente che vedi: linear-gradient con un angolo, radial-gradient con un cerchio o un'ellisse dal centro oppure conic-gradient che si sviluppa attorno a un angolo iniziale; in tutti i casi, i punti colore vengono inseriti nell'ordine corretto. Come fallback per i browser troppo datati per disegnare i gradienti, viene indicato prima un colore uniforme. Il nuovo colore viene aggiunto nell'intervallo più ampio e calcolato in base ai colori adiacenti, così il gradiente non presenta stacchi improvvisi. Funziona al 100% localmente nel browser, senza caricare file sul server.
- Categoria
- Strumenti per sviluppatori
- Esecuzioni
- Nel browser
- Costo
- Gratuito · senza registrazione
- Disponibilità
- Pronto all'uso
Funziona interamente nel browser
CSS
background: #ff7e5f; background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%);
La prima riga usa un colore uniforme per i browser molto datati; tutti i browser attuali usano il gradiente della seconda riga.
Preimpostazioni
Sfumature dall'aspetto uniforme
Una sfumatura tra due tonalità molto diverse, come dal blu al giallo, passa per un grigio spento al centro. Aggiungere un punto intermedio con un colore più vivace mantiene la sfumatura brillante. Le sfumature tra tonalità vicine, come dall'arancione al rosa, raramente hanno bisogno di correzioni.
Scegli o controlla i colori con il convertitore di colori e aggiungi profondità a una scheda con il generatore di ombre per riquadri.
Testo su una sfumatura
Controlla che il testo resti leggibile a entrambe le estremità della sfumatura, non solo al centro. Una sfumatura più scura con testo bianco, oppure una sfumatura delicata dietro un testo scuro, è più sicura di un arcobaleno brillante.
Come usarlo
- Scegli un modello predefinito oppure seleziona lineare, radiale o conico.
- Imposta l'angolo e regola i colori e le relative posizioni; aggiungi un colore per inserire altri punti.
- Copia il CSS nel tuo foglio di stile.
Privacy e limitazioni
Tutto funziona nel browser; l'ultimo gradiente viene conservato solo in questo browser.
Strumenti correlati
Domande frequenti
Che cosa indica l'angolo in un gradiente lineare?
0deg va dal basso verso l'alto, 90deg da sinistra a destra, 180deg dall'alto verso il basso e 270deg da destra a sinistra. Il gradiente viene disegnato lungo quella direzione, quindi 135deg va dall'angolo in alto a sinistra a quello in basso a destra.
Che cos'è un punto colore?
È un colore e la posizione, da 0% a 100% lungo il gradiente, in cui viene raggiunto esattamente. Tra due punti i colori si fondono; inserendo due punti nella stessa posizione si crea un bordo netto invece di una sfumatura: è così che si ottengono le strisce.
Qual è la differenza tra un gradiente conico e uno radiale?
Un gradiente radiale cambia colore dal centro verso l'esterno, formando anelli. Un gradiente conico cambia colore attorno al centro, come le lancette di un orologio, ed è utile per ruote dei colori e grafici a torta.
Servono ancora i prefissi -webkit-?
No. Tutti i browser attuali supportano linear-gradient e radial-gradient senza prefisso, mentre conic-gradient funziona su tutti dal 2021. Il colore di fallback nella prima riga serve solo per browser molto datati.
Strumento gratuito · nel browser esecuzioni · senza account