Generatore di gradiente CSS

Funzionalità di Generatore di gradiente CSS

• 01

  Lineare, radiale e conico

  Lineare è il gradiente di sfondo quotidiano; radiale è ottimo per riflessi e vignettature; conico è perfetto per grafici a torta, ruote cromatiche e sfondi rotanti.

• 02

  Fino a sei interruzioni di colore

  Aggiungi e rimuovi interruzioni, imposta la posizione di ciascuna con un cursore e scegli il colore tramite il selettore di colore del sistema o un valore esadecimale. Le interruzioni vengono automaticamente riordinate per posizione.

• 03

  Dichiarazione CSS copiabile

  L'output è una dichiarazione background: ... completa che puoi incollare direttamente in un foglio di stile, un componente stilizzato o una classe di valore arbitrario Tailwind.

Domande frequenti su Generatore di gradiente CSS

Qual è la differenza tra lineare, radiale e conico?

I gradienti lineari corrono in linea retta a un determinato angolo; i gradienti radiali si irradiano da un centro; i gradienti conici si spazzano intorno a un punto come una lancetta di orologio. Ciascuno si adatta a un effetto visivo diverso.

Quante interruzioni di colore dovrei usare?

Due interruzioni è il classico gradiente a due colori. Tre o quattro ti consentono di creare transizioni realistiche (tramonto, aurora). Più di sei tende a sembrare rumoroso — ecco perché questo generatore è limitato a sei.

Posso usarlo per gli sfondi in un modello di e-mail?

La maggior parte dei client di posta elettronica non supporta ancora in modo affidabile i gradienti CSS moderni — fornisci un colore di fallback solido oltre al gradiente di sfondo se copi questo in un modello di posta elettronica.

L'anteprima è precisa ai pixel?

Sì — l'anteprima viene renderizzata dal motore di gradiente nativo del browser, quindi quello che vedi è esattamente quello che il tuo CSS produrrà.