Generatore CSS Box Shadow
Progetta ombre con piu livelli e ottieni codice CSS pronto all'uso
Controlli Ombra
Anteprima dal Vivo
Output CSS
Esempi di Utilizzo
Ombra Carta Sottile
Un'ombra leggera e sottile perfetta per carte e contenitori di contenuto.
Ombra Multi-Livello
Combina piu livelli di ombra per un effetto di profondita ricco e stratificato.
Ombra Interna
Crea ombre interne per effetti di elementi premuti o incavati.
Funzionalita
Piu Livelli di Ombra
Aggiungi e configura piu livelli di ombra per creare effetti complessi e realistici
Anteprima Visiva dal Vivo
Vedi l'effetto ombra aggiornarsi in tempo reale mentre regoli offset, sfocatura, diffusione e colore
Selettore Colore e Preimpostazioni
Scegli colori personalizzati con un selettore nativo e usa ombre preimpostate per un design rapido
Privacy Prima di Tutto
Tutto funziona nel tuo browser — nessun dato viene inviato a nessun server
Come Usare?
Configura l'Ombra
Regola offset X/Y, sfocatura, diffusione e colore per ogni livello. Attiva inset per ombre interne.
Aggiungi Piu Livelli
Clicca Aggiungi Livello per creare livelli di ombra aggiuntivi per effetti piu complessi.
Copia il CSS
Clicca il pulsante Copia CSS per copiare il codice box-shadow generato negli appunti.
Domande Frequenti
Cos'e un generatore di box shadow?
Un generatore di box shadow e uno strumento visivo che ti permette di progettare effetti CSS box-shadow senza scrivere codice a mano. Regoli i cursori per offset X/Y, sfocatura, diffusione e colore, e il CSS si aggiorna in tempo reale. Sperimenta finche non ti piace il risultato, poi copia il codice.
Funzionalita principali
Questo generatore supporta piu livelli di ombra per combinare ombre morbide e nette che creano profondita. Ogni livello ha il proprio selettore colore e pulsante inset. Sono inclusi preset per stili comuni come card sottili, elementi fluttuanti ed effetti di profondita stratificata.
Casi d'uso comuni
Le card e i modal spesso richiedono un'elevazione sottile. I pulsanti traggono vantaggio da un'ombra leggera all'hover. Le ombre inset funzionano benissimo per i campi di input o i pulsanti premuti. Le ombre multilivello danno alle sezioni hero un aspetto premium.
Consigli per ombre migliori
Mantieni la sfocatura piu alta della diffusione per un aspetto naturale. Usa neri semi-trasparenti (come rgba(0,0,0,0.1)) invece di colori pieni. Sovrapponi due o tre ombre con offset diversi per un'illuminazione realistica.
Privacy
Tutto funziona nel tuo browser. Nessun dato sulle ombre, nessuna impostazione, niente lascia il tuo computer.