Generatore di gradienti CSS
Privacy by design — tutto gira nel tuo browser
Costruisci gradienti CSS lineari, radiali e conici visivamente, nel browser, senza installare nulla. Toova ti permette di posizionare i color stop con drag-and-drop, regolare gli angoli, cambiare tipo e applicare easing, per poi esportare CSS standard pronto da incollare nel tuo progetto — senza caricare nulla su un server.
Gradienti lineari, radiali e conici
I gradienti lineari si muovono lungo un asse rettilineo definito da un angolo o una parola chiave di direzione. I gradienti radiali si espandono da un punto centrale. I gradienti conici girano attorno a un angolo — perfetti per sfondi in stile grafico a torta o effetti ruota dei colori. Toova espone tutti e tre con controlli visivi, così puoi costruire il gradiente che vuoi senza memorizzare ogni variante della sintassi CSS.
Color stop ed easing
Trascina i color stop lungo la barra del gradiente per controllare dove ogni colore inizia e finisce. Aggiungi quanti stop ti servono — Toova non li limita. Usa i preset di easing per introdurre un'interpolazione non lineare, che evita il grigio fangoso nel mezzo che affligge i semplici gradienti a due colori. L'output CSS usa proprietà standard supportate in ogni browser moderno.
Generazione solo nel browser
Ogni gradiente viene generato localmente nel browser, senza chiamate a server esterni. I colori che scegli, gli stop che posizioni, l'output CSS — nulla di tutto ciò lascia la pagina o viene registrato. Può sembrare eccessivo per i gradienti, ma significa che lo strumento è sempre veloce e affidabile, e la pagina funziona offline dopo il primo caricamento. La scheda Rete resterà vuota durante l'uso — verificabile in DevTools.
Domande frequenti
- Quando dovrei usare un gradiente conico?
- I gradienti conici sono perfetti per effetti grafico a torta, ruote dei colori e sfondi astratti rotanti. Girano attorno a un punto centrale, il che è qualcosa che né i gradienti lineari né radiali possono fare. Il supporto del browser è ora solido tra i motori moderni.
- Come evito il grigio fangoso nel mezzo dei gradienti a due colori?
- Aggiungi uno stop intermedio con un colore percettivamente bilanciato, o scegli colori con luminosità simile. Mescolare colori complementari attraverso il loro punto medio RGB produce grigio — scegliere manualmente il punto medio in OKLCH lo evita.
- Posso esportare in altri formati?
- L'output è CSS standard, che funziona direttamente in qualsiasi contesto web. Per gli strumenti di design, copia i singoli color stop e replica il gradiente in Figma o Sketch.
- Supporta la trasparenza?
- Sì. Qualsiasi color stop può avere un canale alpha. Utile per dissolvere i bordi nello sfondo o sovrapporre gradienti con stop semi-trasparenti.
- I miei dati vengono inviati da qualche parte?
- No. La generazione gira interamente nel browser.