Come usare Generatore di gradienti e ombre CSS
- 1
Scegli Gradiente od Ombra del box
Passa da un editor all'altro con le schede sopra l'anteprima.
- 2
Parti da una preimpostazione
Clicca su una preimpostazione per caricarla, oppure tieni quella predefinita e modificala.
- 3
Regola tutto visivamente
Trascina i punti colore e imposta l'angolo, oppure aggiungi livelli di ombra e regola scostamento, sfocatura ed espansione.
- 4
Copia il codice
Copia la dichiarazione CSS o la classe Tailwind e incollala nel tuo progetto.
Limiti e Pro
Gratis e senza registrazione: punti colore e livelli di ombra illimitati, 3 tipi di gradiente, 3 spazi per la miscelazione dei colori e 24 preimpostazioni.
Pro elimina la pubblicità; entrambi gli editor sono completi in ogni piano. Scopri Pro
Informazioni su Generatore di gradienti e ombre CSS
Gradienti e ombre sono i due effetti CSS che più spesso si ritoccano a tentativi negli strumenti per sviluppatori del browser. Questo generatore offre a ciascuno un editor visivo con una grande anteprima dal vivo, poi scrive la dichiarazione CSS esatta e una classe Tailwind con valore arbitrario equivalente, come bg-[linear-gradient(135deg,#ff7e5f_0%,#feb47b_100%)], così puoi incollare il risultato direttamente in un foglio di stile o in un className.
L'editor dei gradienti crea gradienti lineari, radiali e conici. Clicca sulla barra dei punti colore per aggiungere un colore dove clicchi, trascina un punto per spostarlo o usa le frecce per posizioni precise, e assegna a ogni punto una propria opacità. I gradienti lineari e conici hanno un angolo, quelli radiali e conici un punto centrale, quelli radiali una forma a cerchio o a ellisse, e tutti possono ripetersi per ottenere strisce e anelli. Puoi anche scegliere lo spazio colore usato per la miscelazione: OKLab e OKLCH evitano il centro grigio e sporco che la classica miscelazione sRGB produce tra colori saturi, e sono supportati da tutti i browser attuali.
L'editor dell'ombra del box sovrappone tutti i livelli che ti servono. Ogni livello ha scostamenti X e Y, sfocatura, espansione, colore con opacità, un interruttore per l'ombra interna e uno per la visibilità, e i livelli si possono riordinare, perché il primo viene disegnato in alto. Un box di anteprima con dimensioni, raggio degli angoli e colori regolabili mostra l'effetto su una superficie chiara o scura.
Dodici preimpostazioni per ciascun editor, tra tramonti, ruote di colori e strisce, oppure elevazioni Material, ombre morbide a livelli, neumorfismo e ombre nette con scostamento, ti offrono un punto di partenza. Lo strumento genera solo gradienti e ombre del box: text-shadow, filter: drop-shadow e gradienti SVG non sono inclusi.
Privacy
Tutto avviene nella pagina: colori e impostazioni non lasciano mai il tuo browser e nessuna immagine viene caricata. Il gradiente e l'ombra su cui stai lavorando vengono salvati nella memoria locale, così li ritrovi quando torni.
Funzionalità
Lineare, radiale e conico
Punti colore trascinabili con opacità, angolo, centro, forma e modalità ripetuta.
Ombre a più livelli
Sovrapponi, riordina, nascondi e rendi interni i livelli di ombra per una profondità realistica.
CSS e Tailwind
Copia una dichiarazione pronta o una classe Tailwind con valore arbitrario.