Vai al contenuto principale
ImmaginiProcessado no seu navegador

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
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%); }

§ Come usare

Come generare un gradiente CSS visivamente

Crea gradienti lineari, radiali o conici con anteprima in tempo reale ed esporta il CSS pronto all'uso.

  1. Scegli il tipo di gradiente

    Lineare (il più comune, transizioni direzionali), Radiale (dal centro verso l'esterno) o Conico (arco spazzato — ottimo per grafici).

  2. Imposta colori e stop

    Aggiungi due o più colori. Trascina per modificare la posizione di ogni stop. Colori in HEX, RGB o HSL.

  3. Regola l'angolo o il centro

    Lineare: 0deg (verticale), 90deg (orizzontale), 45deg (diagonale). Radiale: imposta l'origine in pixel o %.

  4. Copia il CSS

    Codice pronto da incollare nel tuo foglio di stile, con prefissi -webkit/-moz per la massima compatibilità.

Correlati

Strumenti correlati

Da mesma categoria.

Pro

Filigrana batch

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

Gratis

Mood Board

Combina URL di immagini, palette hex e keywords in una griglia visuale esportabile.

Max

Rimozione sfondo AI

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

Pro

Tavolozza dei colori magica

Inserisci un colore base e genera istantaneamente schemi armoniosi (Analogici, Monocromatici, Complementari).

Gratis

Verifica Contrasto WCAG

Verifica il contrasto dei colori e la conformità WCAG AA/AAA con anteprima ed export.

Gratis

Visualizzatore EXIF

Visualizza i metadati delle immagini: GPS, fotocamera, data di scatto e altro.