Vai al contenuto
TextArray
100% locale

Generatore di gradienti CSS

Genera dichiarazioni di gradienti lineari e radiali CSS con colori e angoli personalizzati.

Uscita

Generatore di gradienti CSS

Un generatore di gradienti CSS crea dichiarazioni di gradienti di sfondo in pochi secondi. I gradienti lineari scorrono in un'unica direzione, perfetti per sfondi discreti o sovrapposizioni accattivanti. Le sfumature radiali emanano da un punto centrale, ideali per effetti riflettori o transizioni di colore uniformi. Scegli il tipo di gradiente, imposta l'angolo per i gradienti lineari (0-360 gradi) e scegli due colori: funzionano tutti i codici esadecimali, RGB, RGBA o i colori con nome. Lo strumento genera una proprietà di sfondo CSS completa pronta per essere incollata nel tuo foglio di stile.

I gradienti sono uno degli elementi di design più versatili nei moderni CSS. Riducono le dimensioni del file rispetto agli sfondi delle immagini, si ridimensionano all'infinito e si animano in modo fluido nei browser. L'anteprima dal vivo mostra esattamente come appare la sfumatura mentre regoli colori e angoli. Copia l'output e applicalo a qualsiasi elemento: uno sfondo di pagina, un pulsante, una sezione di un eroe o una sovrapposizione di carte.

Tutto viene eseguito nel tuo browser, quindi le tue scelte di colore e le impostazioni rimangono private. Nessun dato viene inviato da nessuna parte. Lo strumento funziona anche offline, quindi puoi generare sfumature ovunque e in qualsiasi momento. Che tu stia progettando un sito Web, prototipando un'app o semplicemente sperimentando combinazioni di colori, questo generatore accelera il tuo flusso di lavoro. Modifica l'angolazione, scambia i colori e visualizza immediatamente l'aggiornamento CSS.

FAQ

Cos'è un gradiente CSS?
Un gradiente CSS è una transizione di colore uniforme resa direttamente dal browser. Transizione dei gradienti lineari lungo una linea; i gradienti radiali provengono da un punto centrale. Entrambi sono leggeri, scalabili e possono essere animati.
Quale angolo utilizzo per direzioni diverse?
Per gradienti lineari: 0° è da sinistra a destra, 90° è dall'alto in basso, 180° è da destra a sinistra, 270° è dal basso in alto. Funziona qualsiasi angolo compreso tra 0 e 360 gradi. I gradienti radiali non utilizzano un angolo.
Posso utilizzare qualsiasi formato di colore?
SÌ. I codici esadecimali (#FF0000), RGB (rgb(255, 0, 0)), RGBA con trasparenza (rgba(255, 0, 0, 0.5)), HSL e colori con nome (rosso, blu) funzionano tutti con i gradienti CSS.
I miei dati sui colori vengono inviati ovunque?
No. Questo strumento funziona interamente nel tuo browser. I tuoi colori, angoli e impostazioni non lasciano mai il tuo dispositivo.