Crea gradienti lineari, radiali e conici in modo visivo e copia CSS pulito. Sovrapponi più livelli, aggiungi punti colore con trasparenza e trascina direttamente sull’anteprima per cambiare la direzione.
Ogni gradiente può avere più livelli e ogni livello ha il proprio tipo, angolo e colori. Il risultato è CSS puro senza prefissi dei browser, pronto da incollare nel tuo progetto. Il link della pagina salva il tuo gradiente, così puoi condividerlo o riaprirlo più tardi.
Scegli il tipo di gradiente
Seleziona lineare, radiale o conico per ogni livello. Il lineare fonde i colori lungo una linea retta, il radiale li diffonde da un punto centrale, il conico li fa ruotare attorno al centro.
Regola colori e livelli
Fai clic sulla barra dei colori per aggiungere un punto colore, trascinalo per cambiarne la posizione e scegli qualsiasi colore con trasparenza. Con il pulsante per aggiungere un livello metti un altro gradiente sopra.
Visualizza l’anteprima
Prova il gradiente su sei forme: schermo intero, quadrato, rettangolo orizzontale e verticale, cerchio e stella. Puoi anche cambiare lo sfondo dietro la forma.
background: linear-gradient(90deg, #ffd700 0%, #000000 100%);