CSS Gradient Generator

Crea gradienti CSS lineari e radiali visivamente con anteprima dal vivo.

{{ stop.position }}% 
{{ cssOutput }}

Cos’è un gradiente CSS?

I gradienti CSS creano transizioni di colore fluide tra due o più colori. Sono comunemente usati come sfondi per pulsanti, intestazioni, sezioni hero ed elementi decorativi. Usa linear-gradient() per creare transizioni rettilinee a qualsiasi angolazione, oppure radial-gradient() per transizioni circolari o ellittiche.

Linear Gradient vs. Radial Gradient

Linear Gradient si estende lungo un asse rettilineo — dall’alto al basso, da sinistra a destra o a qualsiasi angolazione. Radial Gradient si irradia verso l’esterno da un punto centrale, come cerchio o ellisse. Entrambi i tipi supportano un numero qualsiasi di stop colore con posizioni regolabili.

Consigli per gradienti belli

  • Usa massimo 2–3 colori per un aspetto pulito.
  • Tonalità simili (es. blu → teal) creano un effetto armonioso.
  • Non posizionare gli stop colore troppo vicini tra loro per evitare bordi netti.
  • Testa il gradiente su diverse dimensioni dello schermo.