CSS Gradient Generator

Informazioni su questo strumento

Il Generatore di Gradienti CSS crea gradienti multicolore fluidi che puoi incollare direttamente nel tuo CSS. Supporta gradienti lineari (direzionali) e radiali (circolari) con qualsiasi numero di punti colore.

I punti colore definiscono dove inizia e finisce ogni colore lungo l'asse del gradiente. Il cursore dell'angolo ruota i gradienti lineari da 0° a 360°.

Come usare

1. Seleziona il tipo di gradiente: Lineare o Radiale.
2. Per i gradienti lineari, trascina il cursore dell'angolo per impostare la direzione.
3. Clicca su un campione per cambiare il colore e trascina il cursore per la posizione.
4. Clicca su + Aggiungi punto per aggiungerne altri. Clicca su ✕ per rimuoverne uno.
5. Clicca su Copia per copiare la dichiarazione CSS background.

Casi d'uso

I web designer creano sfondi per sezioni hero con gradienti CSS invece di immagini. I team di brand generano palette di gradienti che corrispondono alle linee guida dei colori aziendali. Gli sviluppatori prototipano card, pulsanti e overlay.

Domande frequenti

• Qual è la differenza tra gradienti lineari e radiali? — Un gradiente lineare transisce i colori lungo una linea retta a un angolo dato. Un gradiente radiale irradia i colori verso l'esterno da un punto centrale.
• Posso usare più di due colori? — Sì. Clicca su + Aggiungi punto per aggiungere tutti i punti colore che desideri.
• Il CSS generato è compatibile con tutti i browser? — Sì. Le funzioni linear-gradient() e radial-gradient() sono completamente supportate in tutti i browser moderni senza prefissi vendor.