Generatore di gradiente CSS

Generatore visuale di gradienti CSS lineari, radiali e conici: aggiungi color stop, regola l'angolo e copia il CSS. Perfetto per sfondi e pulsanti, gratis nel browser.

Ripeti

각도: 135deg

Stop colore

100%

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

Incorpora

<iframe src="https://devtools.patrache.studio/it/generators/css-gradient/?embed=1" width="100%" height="620"
  style="border:1px solid #e5e7eb;border-radius:12px" loading="lazy"
  title="Generatore di gradiente CSS — Patrache Studio DevTools"></iframe>
<p><a href="https://devtools.patrache.studio/it/generators/css-gradient/">Generatore di gradiente CSS</a> by
   <a href="https://patrache.studio/">Patrache Studio</a></p>

Ultimo aggiornamento: 2026 · Strumento online gratuito

Cos'è Generatore di gradiente CSS?

Generatore visuale di gradienti CSS lineari, radiali e conici: aggiungi color stop, regola l'angolo e copia il CSS. Perfetto per sfondi e pulsanti, gratis nel browser.

Come usare

1
Seleziona tipo— Scegli il tipo di gradiente (lineare, radiale, conico).
2
Regola punti colore— Regola il colore e la posizione di ogni punto colore.
3
Anteprima— Controlla il risultato in tempo reale nell'anteprima.
4
Copia codice CSS— Copia il codice CSS negli appunti con il pulsante 'Copia'.

Strumenti correlati

Generatore CSS box-shadowGeneratore CSS box-shadow con controlli per offset, sfocatura, diffusione, colore e inset e anteprima dal vivo dell'ombra. Copia il CSS pronto all'uso, gratis nel browser.

Generatore CSS border-radiusGeneratore CSS border-radius con otto maniglie d'angolo indipendenti, cursori e anteprima dal vivo della forma arrotondata. Copia il CSS pronto all'uso, gratis nel browser.

Convertitore di coloriConvertitore di colori tra codici HEX, RGB, HSL e OKLCH, con il rapporto di contrasto WCAG tra due colori. Verifica l'accessibilità mentre scegli la palette, gratis nel browser.

Generatore di onde SVGGeneratore di onde SVG online gratuito con editor visivo per forme d'onda morbide. Regola ampiezza, colori e livelli, applica preset pronti all'uso e copia il codice CSS e SVG per sfondi e divisori di sezione.

Domande frequenti

Non c'è limite, ma 2-6 è tipico. Troppi possono influire sulle prestazioni.

Sì. Attiva la casella 'Ripeti' per aggiungere il prefisso repeating.

Cinque preset sono forniti: Sunset, Ocean, Forest, Midnight e Rainbow.

Attualmente, viene prodotto solo CSS puro. La conversione Tailwind è prevista per un aggiornamento futuro.

No. Tutta l'elaborazione avviene nel browser.