Generatore di gradienti CSS

Progetta una sfumatura di colori per lo sfondo del tuo sito e copia il CSS. Trascina i punti sulla barra, fai clic su di essa per aggiungere colori e scegli tra gradiente lineare, radiale o conico.

Gradiente

Esempi:

Colori

Ogni colore accetta HEX, rgba(), hsl(), oklch() o un nome CSS; usa transparent o un alfa inferiore a 1 per sfumare con lo sfondo.

Tipi di gradiente in CSS

linear-gradient() sfuma i colori lungo una linea con l'angolo che indichi (0deg dal basso verso l'alto, 90deg da sinistra a destra). radial-gradient() li distribuisce in cerchi o ellissi a partire da un centro e conic-gradient() li fa ruotare attorno a un punto, come in una ruota dei colori o in un grafico a torta.

Le versioni repeating-linear-gradient(), repeating-radial-gradient() e repeating-conic-gradient() ripetono il motivo: con punti vicini (ad esempio allo 0% e al 10%) servono per creare righe e quadretti senza immagini.

Come usare il codice

I gradienti sono immagini per il CSS: si applicano con background o background-image, mai con background-color. Tutti i browser attuali li supportano senza prefissi -webkit-.

Per un testo sfumato, combina lo sfondo con background-clip: text e color: transparent. E se ci metti sopra del testo, verifica il contrasto con il colore più chiaro del gradiente.