Creatore di gradienti CSS
Costruisci esattamente il gradiente che vuoi.
Scegli la geometria, imposta con precisione stop colore e opacità e usa gli stessi valori per l’anteprima dal vivo e il CSS esportato.
- Posizioni degli stop esatte
- Stop netti supportati
- Funziona in questo browser
Impostazioni del gradiente
Ogni modifica valida aggiorna subito anteprima e CSS. I valori non validi restano modificabili e non vengono mai corretti senza avviso.
Geometria
Inserisci un angolo da 0 a 360.
Usa un valore da 0 a 360.
Inserisci un valore del centro da 0 a 100.
Inserisci un valore del centro da 0 a 100.
Usa valori da 0 a 100 per il centro orizzontale e verticale.
Stop colore
Le posizioni sono ordinate da 0% a 100% nell’output CSS. Gli stop nella stessa posizione mantengono l’ordine dell’elenco, così puoi creare un bordo netto.
-
{{ t('stops.itemTitle', { number: index + 1 }) }}
Inserisci un colore HEX come #1F4E79.
Opacità e posizione
%Inserisci un’opacità da 0 a 100.
%Inserisci una posizione da 0 a 100.
Un gradiente richiede almeno due stop.