Ir para o conteúdo principal
Immagini

Generatore di gradienti CSS

Crea visivamente gradienti lineari, radiali e conici ed esportali istantaneamente come CSS o Tailwind.

0 di 3 utilizzi oggi · 3 rimanenti. Passa a Pro e rimuovi il limite.

Aggiorna

Generatore di Gradienti CSS

Gradiente CSSLineare, radiale e conicoElaborazione locale

Regola la direzione, distribuisci gli stop e ottieni un gradiente pronto per prodotto, landing o design system.

Tipo
linear
Stop
3/8
Esporta
CSS + Tailwind
Mesh
Mesh attiva
01

Anteprima e codice

Colori base
Colore 01
#8C6A2D
Base iniziale del gradiente.
Colore 02
#D3B06F
Base finale del gradiente.
CSS
background: radial-gradient(circle at 28% 24%, rgba(243, 223, 178, 0.2) 0%, rgba(243, 223, 178, 0) 34%), radial-gradient(circle at 78% 68%, rgba(192, 141, 59, 0.18) 0%, rgba(192, 141, 59, 0) 42%), linear-gradient(135deg, #8C6A2D 0%, rgba(211, 176, 111, 0.96) 52%, #2B1D08 100%);
Tailwind
bg-[radial-gradient(circle_at_28%_24%,_rgba(243,_223,_178,_0.2)_0%,_rgba(243,_223,_178,_0)_34%),_radial-gradient(circle_at_78%_68%,_rgba(192,_141,_59,_0.18)_0%,_rgba(192,_141,_59,_0)_42%),_linear-gradient(135deg,_#8C6A2D_0%,_rgba(211,_176,_111,_0.96)_52%,_#2B1D08_100%)]
02

Stop e composizione

Stop colore
#8C6A2D
0% · 100%
Posizione
Opacità
#D3B06F
52% · 96%
Posizione
Opacità
#2B1D08
100% · 100%
Posizione
Opacità
03

Geometria

Tipo e direzione
Tipo
Angolo
135°
Centro e opzioni
Centro X
50%
Centro Y
50%
Ripetizione
Cadenza utile per divisori, trame e linee prodotto.
04

Output avanzati

Overlay mesh
Overlay per hero visivo e superfici con profondità.
2 livelli
background: radial-gradient(circle at 28% 24%, rgba(243, 223, 178, 0.2) 0%, rgba(243, 223, 178, 0) 34%), radial-gradient(circle at 78% 68%, rgba(192, 141, 59, 0.18) 0%, rgba(192, 141, 59, 0) 42%), linear-gradient(135deg, #8C6A2D 0%, rgba(211, 176, 111, 0.96) 52%, #2B1D08 100%);
Pacchetto token
CSV con Hero, Surface e Accent pronti per l'implementazione.
:root { --gradient-stop-1: #8C6A2D; --gradient-stop-2: #D3B06F; --gradient-stop-3: #2B1D08; --gradient-css: radial-gradient(circle at 28% 24%, rgba(243, 223, 178, 0.2) 0%, rgba(243, 223, 178, 0) 34%), radial-gradient(circle at 78% 68%, rgba(192, 141, 59, 0.18) 0%, rgba(192, 141, 59, 0) 42%), linear-gradient(135deg, #8C6A2D 0%, rgba(211, 176, 111, 0.96) 52%, #2B1D08 100%); }
Sobre

Cos'è il Generatore di Gradienti CSS?

Por Quorify EditorialAtualizado em

Il Generatore di Gradienti CSS di Quorify crea gradienti lineari, radiali e conici visivamente e li esporta come CSS o Tailwind istantaneamente. L'elaborazione avviene localmente nel tuo browser tramite Canvas API e formati standardizzati — utile quando lavori con immagini sensibili (passaporto, contratto, screenshot interno) e preferisci non caricarle su un server esterno. Supporta formati moderni (JPEG, PNG, WebP, AVIF) conformi agli standard ISO/IEC. Parte del kit immagini di Quorify — combinalo con altri strumenti di compressione, conversione e editing visivo. Per i dettagli sulla gestione dei dati, consulta la nostra Privacy Policy.

Casos

Quando usarlo

  1. Preparare un'immagine prima del caricamento su un sito web, e-commerce o social network.

  2. Velocizzare il lavoro di un designer freelance con attività ripetitive (ridimensionamento batch, conversione formato).

  3. Modificare screenshot per documentazione tecnica o tutorial senza aprire un editor pesante.

  4. Preparare materiale marketing — banner, post, miniatura — in formato ottimizzato.

  5. Risolvere un compito rapido senza dover installare Photoshop o simili.

Método

Come funziona

Il Generatore di Gradienti CSS utilizza Canvas API e i codec immagine nativi del browser, che implementano gli standard ISO/IEC per JPEG, PNG, WebP e AVIF. L'elaborazione è locale — l'immagine non viene inviata a un server esterno. Per tutti i dettagli sulla gestione dei dati, consulta la nostra Privacy Policy.

FAQ

Domande frequenti

L'immagine viene inviata a un server?
No. Il Generatore di Gradienti CSS elabora l'immagine localmente nel browser tramite Canvas API. Per tutti i dettagli sulla gestione dei dati, consulta la nostra Privacy Policy.
Quali formati sono supportati?
I principali formati web (JPEG, PNG, WebP, AVIF). Il supporto per formati legacy (BMP, TIFF) può variare a seconda del browser.
C'è un limite di dimensione?
L'elaborazione dipende dalla memoria del browser. Immagini molto grandi (oltre 50 MB) potrebbero rallentare la pagina. Consigliamo di comprimere prima se necessario.
La qualità viene preservata?
Le conversioni lossless preservano la qualità completa. Le conversioni compresse (JPEG, WebP) seguono il livello scelto — c'è sempre un compromesso tra dimensione e qualità.
Funziona su mobile?
Sì, nei browser moderni. Immagini molto grandi potrebbero essere limitate dalla memoria del dispositivo mobile.
Posso elaborare più immagini?
Alcuni strumenti supportano l'elaborazione batch. Consulta l'interfaccia dello strumento specifico per conferma.
Fontes

Fonti ufficiali

Tabelas, leis e referências consultadas para fundamentar esta ferramenta.

  1. Standard internazionaliISO/IEC serie 14496/15444ISO/IEC JTC1 SC29

    Specifiche formati immagine e video

    Standard internazionali per codifica e scambio di immagini (JPEG, PNG, WebP, AVIF) e video — riferimento usato da browser e software di editing.

    Consultar fonte oficial
  2. Documentazione ufficialeVigenteGoogle Web Dev

    Best practice immagini web

    Raccomandazioni di Google sull'ottimizzazione delle immagini per il web — formati moderni, lazy loading, dimensionamento e impatto sui Core Web Vitals.

    Consultar fonte oficial
  3. Standard dell'industriaExif 2.32CIPA · Camera & Imaging Products Association

    Specifica Exif

    Standard di metadati Exif (Exchangeable Image File Format) usato da fotocamere digitali e smartphone per archiviare informazioni di acquisizione.

    Consultar fonte oficial

Metodologia — esta ferramenta consulta as tabelas e legislação vigentes nas fontes acima. As regras são atualizadas conforme novas instruções normativas são publicadas pelos órgãos competentes.

Última verificação editorial: junho de 2026.

SponsorizzatoQuorify · piano gratuito
Quorify Pro

Usa Quorify senza limiti

100 usi/giorno su tutti i 125 strumenti · senza pubblicità · cronologia illimitata

A partire da$4.08/mo
Vedi piani
Compartilhe
SponsorizzatoQuorify · piano gratuito
Quorify Pro

Usa Quorify senza limiti

100 usi/giorno su tutti i 125 strumenti · senza pubblicità · cronologia illimitata

A partire da$4.08/mo
Vedi piani

Correlati

Strumenti correlati

toolLayout.related_description

Max

Rimozione sfondo AI

Intelligenza artificiale che ritaglia e rimuove perfettamente lo sfondo da qualsiasi immagine.

Pro

Filigrana batch

Velocizza i caricamenti degli immobili applicando filigrane, loghi e licenze a un massimo di 50 foto contemporaneamente. Chiudi la cerniera.

Pro

Convertitore di immagini

Ridimensiona e converti le immagini a livello globale senza perdere la qualità.

Max

Compressore di immagini

Riduci brutalmente il peso delle tue immagini preservando la qualità visiva.

Pro

Ridimensionatore esatto

Regola l'esatta larghezza o altezza in pixel di qualsiasi immagine.

Pro

Ridimensionatore di immagini in blocco

Converti e ridimensiona dozzine di immagini contemporaneamente direttamente nel tuo browser con il 100% di privacy.