Skip to content
Zoyku

Generatore di gradienti CSS

Unisci da due a cinque colori in gradienti CSS lineari, radiali o conici, con anteprima dal vivo, codice pronto da incollare e palette armonizzate a un clic.

Color stops

Palettes

Angle: 135°
Live preview
CSS
background-color: #7C3AED; /* fallback for old browsers */
background-image: -webkit-linear-gradient(135deg, #7C3AED 0%, #EC4899 100%);
background-image: linear-gradient(135deg, #7C3AED 0%, #EC4899 100%);

0° points up and 90° to the right — the angle runs clockwise.

Questo strumento gira interamente nel tuo browser. I tuoi dati non lasciano mai il dispositivo: non vengono caricati su nessun server.

Come si usa

  1. 1Imposta da due a cinque colori, oppure parti da una palette predefinita.
  2. 2Scegli il tipo di gradiente, poi angolo o forma; blocca le posizioni se serve.
  3. 3Copia il blocco CSS e incollalo nel tuo foglio di stile.

Generatore di gradienti CSS

Scegli da due a cinque colori, seleziona lineare, radiale o conico e trascina l'angolo — l'anteprima si aggiorna mentre scrivi e il CSS è sempre a una copia di distanza. Lascia vuota la posizione di una tappa e verrà collocata automaticamente come farebbe CSS; percentuali esatte creano tagli netti e sfumature decentrate.

L'output è un vero blocco di produzione: una riga di colore pieno di riserva per i browser antichi, una riga con prefisso -webkit- per i vecchi motori WebKit e la sintassi standard per ultima. Il pulsante di armonizzazione casuale ruota le tinte della palette nello spazio HSL, così ogni rimescolamento resta equilibrato.

Domande frequenti

Perché il CSS include una riga con prefisso -webkit-?

È una riga di compatibilità per i vecchi motori WebKit (circa l'era di Safari 5-6) che capivano solo -webkit-linear-gradient. Tutti i browser dell'ultimo decennio leggono la riga standard, quindi puoi cancellare quella con prefisso se non devi supportare quelle versioni — conservarla costa una riga, eliminarla non costa nulla.

Cosa significa l'angolo in un gradiente lineare?

È la direzione in cui il gradiente avanza, misurata in senso orario dall'alto: 0deg va dal basso verso l'alto, 90deg da sinistra a destra, 180deg dall'alto in basso. Lo strumento normalizza qualunque angolo (−45 diventa 315) e la convenzione di direzione opposta della vecchia sintassi è già sistemata nella riga -webkit-.

Strumenti correlati

Tutti gli strumenti Utilità →

Verificatore di contrasto

Calcola il rapporto di contrasto WCAG tra due colori con esiti AA e AAA per testo normale e grande, più un'anteprima dal vivo. Tutto avviene nel tuo browser.

Tutti gli strumenti →

Convertitore di colori

Incolla un colore in hex, rgb() o hsl() e ottieni tutti e tre i formati più una riga già pronta di tinte e ombre per il tuo design system.

Tutti gli strumenti →

Selettore colori

Scegli un colore dal campione o prendine uno direttamente dallo schermo con l'API EyeDropper — hex, RGB e HSL copiati con un clic.

Tutti gli strumenti →

Bordo immagine

Aggiungi un bordo a tinta unita o trasparente a un'immagine o a un intero lotto — anteprima dal vivo, output PNG o JPG, gira interamente nel tuo browser.

Tutti gli strumenti →

Incorpora questo strumento

Metti questo strumento sul tuo sito con una riga: gira nel browser del visitatore.

<iframe src="https://zoyku.com/it/tools/gradient-generator?embed=1" width="100%" height="640" style="border:0;border-radius:16px" title="Zoyku — gradient-generator" loading="lazy"></iframe>
100% local processing