IT
PortuguêsEnglishEspañolDeutschFrançaisItaliano日本語Русский中文
Home Preferiti
Voltar

Generatore di gradienti CSS

Crea gradienti lineari e radiali con più colori e copia il CSS pronto.

Come si usa

Crea il tuo gradiente.

Disponibile in: PortuguêsEspañolEnglishDeutschFrançaisItaliano日本語Русский中文

Prossimo strumentoGeneratore di hash→
Pubblicità

Generatore di gradienti CSS: a cosa serve

Il generatore crea sfumature con tutti i colori che vuoi, in formato lineare (con angolo) o radiale. L anteprima cambia subito e il codice CSS è pronto da copiare.

Puoi anche scaricare il gradiente come immagine PNG 1920×1080, da usare come sfondo.

Come si usa

  1. Scegli il tipo e l’angolo.
  2. Regola i colori e le posizioni.
  3. Copia il CSS o scarica il PNG.

Quando usarlo

  • Sfondi di siti e pulsanti.
  • Sfondi del desktop e delle slide.
  • Provare combinazioni di colori.

Domande frequenti

Funziona in tutti i browser?

Sì. Il CSS generato usa linear-gradient e radial-gradient, supportati da tutti i browser attuali.

Posso scaricarlo come immagine?

Sì. Il pulsante Scarica PNG genera un’immagine 1920×1080 con il gradiente, ideale per sfondi del desktop o delle slide.

È davvero gratis?

Sì, 100% gratis. Senza registrazione, senza abbonamento e senza limiti d’uso. Tutti gli strumenti di Tools123 sono gratuiti.

Strumenti simili

Animazione allo scroll della pagina (scroll reveal in CSS)Genera l’effetto di elementi che compaiono mentre la pagina scorre (scroll reveal) in puro CSS, con animation-timeline: view(): comparsa, salita, scorrimento dai lati, ingrandimento o sfocatura, con distanza e tratto di scorrimento regolabili, senza nascondere nulla nei browser che non hanno ancora la funzione.Usa →
Calcolatrice clamp() per font fluidiCalcola il clamp() del CSS per testi e spaziature che crescono con la larghezza dello schermo: inserisci la dimensione su smartphone e su computer e le larghezze di schermo, e copia il valore in rem con anteprima e avviso di accessibilità per lo zoom.Usa →
Abbinamento di font di Google FontsProva abbinamenti di font di Google Fonts per titoli e testi del sito: scegli tra coppie già pronte o creane una tua, guarda l’anteprima con il tuo testo e copia il link di caricamento e il CSS.Usa →
Verifica del contrasto dei colori (WCAG)Controlla se il colore del testo ha abbastanza contrasto con lo sfondo secondo le regole di accessibilità WCAG AA e AAA, con anteprima dal vivo.Usa →
Convertitore di coloriConverti i colori tra HEX, RGB, HSL e CMYK e guarda le tonalità più chiare e più scure.Usa →
Colore HEX in classe TailwindScopri quale colore della palette standard di Tailwind CSS (v3) somiglia di più al tuo colore HEX o RGB, con la distanza percettiva e le cinque opzioni più vicine, oppure usa il valore esatto con la sintassi tra parentesi quadre.Usa →

Grazie mille per l’aiuto!

Ogni donazione aiuta a mantenere il sito online. Gli strumenti sono fatti per aiutarti, ma abbiamo costi di server. Se puoi aiutare, ci aiuti molto! Scegli o digita l’importo:

Pagamento sicuro tramite Stripe. Si apre in un’altra scheda.

Gli strumenti sono offerti così come sono, senza garanzia. Non rispondiamo dei risultati né dell’uso che ne viene fatto.