Categoria: Sviluppo
Generatore di gradienti CSS
Costruisci un gradiente lineare o radiale e copia il CSS
Scegli due o tre colori, imposta l'angolo, guarda l'anteprima dal vivo e copia una dichiarazione background-image pronta da incollare. Tutto viene renderizzato nel browser.
background-image: linear-gradient(135deg, #0f7b63 0%, #1f4f7a 100%);
Tutto ciò che c'è in questa pagina viene elaborato nel tuo browser. Niente viene caricato.
A cosa serve
Un gradiente si giudica meglio a occhio che scrivendolo a mano, così questo strumento dipinge il CSS reale in un pannello di anteprima mentre lo modifichi. Scegli un gradiente lineare con l'angolo in gradi o uno radiale centrato, aggiungi un colore intermedio facoltativo per una miscela a tre stop e copia la dichiarazione direttamente nel tuo foglio di stile.
Come si usa
- Scegli un gradiente lineare o radiale.
- Seleziona il colore iniziale e finale e, se vuoi, uno intermedio.
- Regola l'angolo e copia la dichiarazione CSS.
Privacy
Questo strumento funziona interamente nel tuo browser. Quello che inserisci non viene mai caricato, salvato o condiviso: chiudendo la scheda sparisce.
Domande frequenti
- Viene caricato qualcosa?
- No. L'anteprima è uno sfondo CSS dipinto dal tuo browser e la dichiarazione è costruita nella pagina, quindi non parte nulla verso un server.
- Servono i prefissi dei produttori?
- Non per i browser attuali: linear-gradient e radial-gradient senza prefisso sono supportati da molti anni.
- In che direzione punta l'angolo?
- In CSS 0deg va dal basso verso l'alto e l'angolo cresce in senso orario, quindi 90deg va da sinistra a destra e 180deg dall'alto in basso.