Generatore di gradienti CSS
Scegli due colori, seleziona un gradiente lineare o radiale e regola l’angolo per vedere un’anteprima dal vivo. Il codice CSS corrispondente viene generato all’istante ed è pronto da copiare direttamente nel tuo foglio di stile.
background: linear-gradient(90deg, #ff9a00, #60acfc);Come funziona
Scegli i tuoi due colori con i selettori, seleziona «lineare» o «radiale» e, per i gradienti lineari, trascina il cursore dell’angolo. L’anteprima e il codice CSS qui sotto si aggiornano istantaneamente a ogni modifica.
Suggerimento
Un angolo di 90deg va da sinistra a destra, 180deg dall’alto in basso, e 0deg dal basso in alto — prova il cursore per vedere come cambia la direzione del gradiente.
Qual è la differenza tra lineare e radiale?
Un gradiente lineare transita lungo una linea retta all’angolo impostato. Un gradiente radiale si espande in cerchio dal centro verso l’esterno, indipendentemente dall’angolo.
Altri strumenti in questa categoria
Calcolatore di esposizione
Trova esposizioni fotografiche equivalenti tra apertura, tempo di posa e ISO.
Calcolatore di proporzioni
Ridimensiona un'immagine o un video proporzionalmente e trova il rapporto semplificato.
Verificatore di contrasto
Verifica se un colore di primo piano e di sfondo rispettano le linee guida di contrasto WCAG.
Generatore di palette di colori
Trasforma qualsiasi colore base in palette complementari, analoghe e triadiche.
Convertitore di formati colore
Converti qualsiasi colore tra HEX, RGB, HSL e CMYK all'istante, con copia in un clic per ogni formato.
Generatore di scala tipografica
Genera una serie armoniosa di dimensioni del carattere a partire da una dimensione base e un rapporto di scala, pronta da copiare come proprietà personalizzate CSS.