Generatore di gradienti CSS
Come funziona
Scegli il tipo di gradiente (lineare, radiale o conico) e costruiscilo a vista. Aggiungi tutti i colori che vuoi con il selettore, sposta la posizione di ognuno con il suo cursore (da 0 a 100%) e regola l'angolo per il lineare, la forma (cerchio o ellisse) e la posizione per il radiale, l'angolo iniziale e la posizione per il conico. L'anteprima si ridisegna mentre trascini, quindi vedi esattamente cosa renderà il CSS.
Quando ti piace, copia la dichiarazione `background: ...;` e incollala nel foglio di stile, oppure parti da uno dei dieci gradienti pronti e modificalo. Il risultato è CSS standard che funziona in tutti i browser moderni, senza immagini e senza dipendenze.
Tipo, colori e angolo finiscono nell'URL della pagina, e il pulsante Copia il link lo copia negli appunti: chi lo apre ritrova lo stesso gradiente. Le posizioni dei colori, la forma e la posizione del radiale non sono nel link, quindi all'apertura i colori vengono distribuiti in modo uniforme.
L'editor gira tutto nel browser: non viene caricato niente e il gradiente non lascia la pagina.
Domande frequenti
Che tipi di gradiente CSS supporta?
- Tre: lineare (linear-gradient, lungo una retta con l'angolo che imposti), radiale (radial-gradient, un cerchio o un'ellisse che si allarga da un punto) e conico (conic-gradient, una rotazione intorno a un punto).
Posso usare più di due colori?
- Sì, quanti ne vuoi con il pulsante Aggiungi un colore. Ogni colore ha una posizione in percentuale lungo il gradiente; quando i colori sono più di due puoi anche toglierli.
Come condivido un gradiente?
- Con il pulsante Copia il link: l'URL contiene tipo, colori e angolo, quindi chi lo apre vede lo stesso gradiente. Le posizioni dei singoli colori non sono salvate nel link e vengono distribuite in modo uniforme.
I miei dati vengono salvati da qualche parte?
- No. Tutto gira nel tuo browser e nessun dato viene inviato a un server.