Generatore di gradienti CSS — Lineari, radiali e conici con anteprima dal vivo
Crea gradienti lineari, radiali e conici con punti di colore trascinabili, una manopola per l'angolo e preset. Copia il CSS o una classe Tailwind.
background: #54a5d8; background: linear-gradient(135deg, #4f46e5 0%, #06b6d4 55%, #a7f3d0 100%);
bg-[linear-gradient(135deg,#4f46e5_0%,#06b6d4_55%,#a7f3d0_100%)]
La prima riga è un colore pieno di riserva (la media dei tuoi punti) per i client email e i browser molto vecchi che ignorano i gradienti.
Funziona interamente nel tuo browser. Nulla di ciò che inserisci viene inviato a noi o conservato. Sfoglia tutti gli strumenti gratuiti.
Hai trovato un problema o qualcosa che potrebbe andare meglio? Leggiamo ogni messaggio e sistemiamo le cose in fretta.
Questo generatore di gradienti CSS gratuito crea gradienti lineari, radiali e conici in modo visuale e ti fornisce il CSS da incollare. Trascina i punti di colore lungo la barra, fai clic sulla barra per aggiungerne altri, imposta l'opacità di ogni punto, ruota la manopola dell'angolo, e l'anteprima si aggiorna man mano. L'output include un colore pieno di riserva e una classe Tailwind a valore arbitrario, quindi funziona con il CSS puro, con una libreria di componenti o in un progetto utility-first.
I gradienti sono semplici immagini CSS, quindi non richiedono alcuna richiesta di rete, si adattano a qualsiasi dimensione senza sfocarsi e si possono sovrapporre a foto o ad altri gradienti. Nascondono però alcune trappole: un gradiente tra due colori complementari saturi passa per un grigio spento nel mezzo, e il testo su un gradiente deve rispettare il contrasto nel suo punto più chiaro. Le note qui sotto spiegano la sintassi, queste insidie e come i gradienti ripetuti creano le strisce.
Come si usa
- Scegli Lineare, Radiale o Conico, e seleziona Ripetuto se vuoi che il motivo si ripeta.
- Fai clic su un punto della barra per selezionarlo, poi modificane colore, posizione e opacità qui sotto. Fai clic su uno spazio vuoto della barra per aggiungere un punto; premi Canc per rimuovere quello selezionato.
- Imposta la direzione con la manopola dell'angolo (trascinala o usa i tasti freccia) o con i pulsanti degli angoli rapidi. Per i radiali e i conici, imposta il punto centrale.
- Oppure parti da un preset e regolalo.
- Copia il CSS (con la sua riga di riserva) o la classe Tailwind.
Domande frequenti
Come si crea un gradiente in CSS?
Usa una funzione di gradiente come immagine di sfondo: background: linear-gradient(90deg, #4f46e5 0%, #06b6d4 100%); Il primo argomento è la direzione (un angolo o parole chiave come to right), seguita dai punti di colore, ciascuno composto da un colore e una posizione facoltativa. radial-gradient() si espande da un punto e conic-gradient() ruota attorno a un punto. I gradienti sono immagini, quindi vanno in background o background-image, non in background-color.
Cosa indica l'angolo in linear-gradient?
È la direzione verso cui procede il gradiente, misurata in senso orario a partire dall'alto: 0deg va dal basso verso l'alto, 90deg da sinistra a destra, 180deg dall'alto verso il basso (il valore predefinito se lo ometti) e 270deg da destra a sinistra. È diverso dalla convenzione matematica in cui 0 gradi punta a destra, ed è per questo che i gradienti di alcuni strumenti di design risultano ruotati.
Che differenza c'è tra gradienti lineari, radiali e conici?
Un gradiente lineare cambia colore lungo una linea retta. Un gradiente radiale cambia colore verso l'esterno a partire da un punto centrale, come un cerchio o un'ellisse, e la sua parola chiave di dimensione (closest-side, farthest-corner e così via) determina dove cade l'ultimo punto. Un gradiente conico cambia colore attorno a un punto centrale, come le lancette di un orologio, e per questo è lo strumento giusto per grafici a torta, ruote dei colori e indicatori di caricamento.
Come si fanno le strisce con i gradienti CSS?
Metti due punti nella stessa posizione per ottenere un bordo netto invece di una sfumatura, poi ripeti il motivo. Ad esempio repeating-linear-gradient(45deg, #244b3f 0 10px, #e8f0ec 10px 20px) crea strisce diagonali larghe 10px. Il preset Strisce di questo strumento fa lo stesso con le percentuali. In un gradiente ripetuto, la distanza tra il primo e l'ultimo punto è la lunghezza di una ripetizione.
Come si usa un gradiente in Tailwind CSS?
Per semplici gradienti lineari a due o tre colori usa le utility di Tailwind, come bg-gradient-to-r from-indigo-600 to-cyan-500 (bg-linear-to-r in Tailwind v4). Per tutto il resto (angoli, gradienti radiali o conici, punti con opacità) usa un valore arbitrario: la classe generata qui, come bg-[linear-gradient(135deg,#4f46e5_0%,#06b6d4_55%)], dove i trattini bassi sostituiscono gli spazi. I valori arbitrari molto lunghi sono difficili da leggere, quindi valuta di spostarli nella configurazione del tema.
Perché il mio gradiente appare spento o grigio nel mezzo?
Per impostazione predefinita i browser interpolano i gradienti in sRGB, e la linea retta tra due colori saturi quasi opposti (dal blu al giallo, dal rosso al verde) passa per un grigio desaturato. Aggiungi un punto intermedio con un colore di passaggio pulito oppure, nei browser attuali, interpola in uno spazio percettivo: linear-gradient(90deg in oklch, blue, yellow). Il banding nei gradienti lunghi e delicati è un problema diverso, causato dal colore a 8 bit; una leggera texture di rumore sopra il gradiente lo nasconde.
Riferimento della sintassi dei gradienti
• linear-gradient(angle, stop, stop, ...): angolo in deg o turn, oppure una parola chiave come to right o to bottom left. Predefinito 180deg (dall'alto verso il basso).
• radial-gradient(shape size at x y, stops): la forma è circle o ellipse (predefinita ellipse); la dimensione è closest-side, closest-corner, farthest-side o farthest-corner (predefinita), oppure lunghezze esplicite; la posizione predefinita è center.
• conic-gradient(from angle at x y, stops): i punti sono posizionati in gradi o percentuali attorno al cerchio. Ripeti il primo colore come ultimo punto per una ruota senza giunture.
• repeating-*-gradient(): stessa sintassi; i punti si ripetono per tutta la grandezza dell'elemento.
• Punti: un colore seguito da zero, una o due posizioni. Due posizioni (red 20% 40%) creano una banda piena. Una posizione da sola tra due punti (red, 30%, blue) sposta il punto medio della sfumatura.
• Trasparenza: punti rgba() o esadecimali a 8 cifre. Sfuma verso il trasparente nello stesso colore, rgba(0,0,0,0), non con la parola chiave transparent, che nei vecchi browser indicava il nero trasparente e ingrigiva i gradienti chiari.
Gradienti dietro al testo: mantenerlo leggibile
Il contrasto su un gradiente vale quanto il suo punto peggiore. Verifica il colore del testo rispetto al punto più chiaro (per il testo scuro) o al punto più scuro (per il testo chiaro) con lo strumento Verifica contrasto, non rispetto alla media.
Per il testo sopra una foto, un gradiente scuro sovrapposto è la soluzione standard: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.75) 100%) sovrapposto all'immagine (il preset Dissolvenza al trasparente) scurisce solo la parte bassa, dove di solito si trovano le didascalie. Mettilo per primo nell'elenco degli sfondi: background: linear-gradient(...), url(photo.jpg).
Il colore pieno di riserva nel CSS generato è importante per le email HTML, dove molti client, soprattutto Outlook su Windows, ignorano completamente i gradienti. Senza di esso, il testo bianco può finire su uno sfondo bianco.
Strumenti gratuiti correlati
- Generatore di box-shadow — Crea effetti box-shadow e text-shadow a più livelli con anteprima dal vivo e preset per elevazione, neumorfismo e bagliore, poi copia il CSS.
- Generatore di palette di colori — Premi la barra spaziatrice per una nuova palette, blocca i colori che ti piacciono, scegli un'armonia o ricava la palette da una foto. Esporta in CSS, Tailwind, SCSS, JSON o PNG.
- Verifica contrasto — Controlla i colori di testo e sfondo secondo WCAG 2.x AA e AAA, leggi il valore APCA Lc e ottieni il colore più vicino che supera il test.
- Selettore e convertitore di colori — Preleva qualsiasi colore da qualsiasi punto dello schermo o converti all'istante tra HEX, RGB e HSL.
- Playground particles.js — Modifica una configurazione particles.js con i controlli o direttamente in JSON, guardala in azione dal vivo e copia il JSON o uno snippet HTML pronto da incollare.