Creatore di gradienti.

Crea gradienti CSS lineari, radiali o conici con anteprima in tempo reale. Regola colori e direzione, poi copia il CSS.

0%
100%

          
        

Scegli un tipo di gradiente (lineare, radiale o conico), aggiungi stop di colore, regola le posizioni e vedi il risultato dal vivo. La proprietà CSS background generata è pronta da copiare e incollare nel progetto. Aggiungi tutti gli stop che vuoi.

Come si usa

Seleziona un tipo di gradiente, regola l’angolo (per lineare/conico), clicca i campioni per cambiare colore e trascina i cursori per impostare le posizioni. Clicca + Aggiungi colore per aggiungere altri stop. Copia il CSS dal blocco di codice scuro a destra.

Esempi

Sunset linear (135°) linear-gradient(135deg, #ee6c4d 0%, #3859d5 100%)
Radial glow radial-gradient(circle, #ffffff 0%, #3859d5 100%)
Conic colour wheel conic-gradient(from 0deg, #ee6c4d, #3859d5, #1f8a5b, #ee6c4d)

FAQ

What is a conic gradient?

A conic gradient rotates colours around a central point. It's useful for pie charts, colour wheels, dial effects, and any design where colour transitions in a sweep rather than a line.

How many colour stops can I add?

As many as you like — click + Add colour to insert additional stops. The CSS is valid regardless of how many stops you use.

Strumenti correlati

Privacy e trattamento dei dati

Questo strumento gira interamente nel tuo browser. Nulla di ciò che digiti o incolli viene inviato a un server — tutta l'elaborazione avviene localmente sul tuo dispositivo.