ImmaginiGratis · 3 usi/giornoElaborato nel tuo browser
Generatore di gradienti CSS
Crea visivamente gradienti lineari, radiali e conici ed esportali in CSS o Tailwind.
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%);
}
Correlati
Altri della stessa categoria
Da mesma categoria.
Gratis · 2 usi/giorno
Filigrana in blocco
Applica un logo o un testo come filigrana su più foto insieme e scarica tutto in ZIP.
Gratis · 3 usi/giorno
Mood board (pannello d'ispirazione)
Combina URL di immagini, una palette esadecimale e parole chiave in una griglia visiva esportabile.
Gratis · 1 uso/giorno
Rimozione sfondo IA
Scontorna lo sfondo della foto con un modello di IA che funziona nel tuo browser. Rende meglio con persone e prodotti in primo piano.
Gratis · 2 usi/giorno
Generatore di palette di colori
Inserisci un colore di base e genera schemi armonici (analoghi, monocromatici, complementari).
Gratis · 3 usi/giorno
Verifica contrasto WCAG
Verifica il contrasto dei colori e la conformità WCAG AA/AAA, con anteprima ed esportazione.
Gratis · 3 usi/giorno
Visualizzatore EXIF
Vedi i metadati delle immagini: GPS, fotocamera, data di scatto e altro.