MoreOnlineTools
ESC

Generatore CSS Box Shadow

Progetta ombre con piu livelli e ottieni codice CSS pronto all'uso

Controlli Ombra

Anteprima dal Vivo

Output CSS

Tutta l'elaborazione avviene nel tuo browser. Nessun dato viene inviato a nessun server.

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?

1

Configura l'Ombra

Regola offset X/Y, sfocatura, diffusione e colore per ogni livello. Attiva inset per ombre interne.

2

Aggiungi Piu Livelli

Clicca Aggiungi Livello per creare livelli di ombra aggiuntivi per effetti piu complessi.

3

Copia il CSS

Clicca il pulsante Copia CSS per copiare il codice box-shadow generato negli appunti.

Domande Frequenti

L'offset X sposta l'ombra a sinistra (negativo) o a destra (positivo). L'offset Y la sposta in su (negativo) o in giu (positivo). La sfocatura controlla la morbidezza — 0 e un bordo netto, valori piu alti producono bordi piu morbidi. La diffusione espande (positivo) o riduce (negativo) la dimensione dell'ombra prima della sfocatura. Una diffusione negativa con molta sfocatura crea un'ombra piu compatta e realistica.

Tutti quelli di cui hai bisogno. CSS box-shadow accetta un elenco di valori ombra separati da virgole. Livelli multipli permettono di combinare un'ombra scura e compatta per la profondita con una piu ampia e chiara per la luce ambientale. Ogni livello ha impostazioni indipendenti di offset, sfocatura, diffusione, colore e inset.

Inset ribalta l'ombra per renderla all'interno dell'elemento invece che all'esterno. Senza inset, l'ombra conferisce un aspetto sollevato o fluttuante. Con inset, l'ombra conferisce un aspetto premuto, incassato o neumorfistico. Utile per i campi di input che sembrano incavati o i pulsanti che sembrano premuti quando sono attivi.

I colori solidi come #000000 risultano duri su qualsiasi sfondo non bianco. I colori semi-trasparenti come rgba(0, 0, 0, 0.15) si fondono naturalmente con cio che c'e dietro di essi. La maggior parte delle ombre nelle interfacce utente usa il nero con un'opacita del 10-25%.

Sottile: un'ombra appena percettibile per le card. Medio: un'ombra di elevazione standard per le card. Forte: un'ombra piu profonda per modal o sovrapposizioni. Fluttuante: un'ombra con offset elevato che fa sembrare gli elementi in volo. Interno: un'ombra interna per i pulsanti nello stato premuto. A Strati: due ombre combinate per un effetto realistico a molteplici profondita.

Il neumorfismo usa due ombre: una leggermente piu chiara dello sfondo e una leggermente piu scura. Esempio: "box-shadow: 6px 6px 12px #b8b9be, -6px -6px 12px #ffffff" su uno sfondo grigio chiaro. Abilita due livelli, imposta direzioni X/Y opposte e usa varianti chiare e scure del colore di sfondo.

No. A differenza di outline o border, box-shadow non influisce sulle dimensioni dell'elemento ne sul flusso del layout. L'ombra viene renderizzata fuori (o dentro con inset) dal box model senza spostare gli altri elementi. I valori di diffusione non si aggiungono alla larghezza o all'altezza calcolata dell'elemento.

No. Tutta la generazione CSS avviene localmente nel tuo browser. Niente viene caricato o memorizzato.

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.

Sicurezza e Privacy

La sicurezza dei vostri dati è la nostra priorità

Elaborazione Locale

Tutta l'elaborazione avviene nel vostro browser

Nessun Trasferimento Dati

I vostri dati non vengono inviati ai nostri server

Nessun Archiviazione Dati

Nessun dato viene memorizzato o condiviso

Crittografia SSL

Crittografia SSL per connessione sicura

Passo Successivo

Generatore di Border Radius

Genera CSS border-radius con anteprima visiva

Generatore di Gradienti CSS

Genera gradienti CSS con anteprima dal vivo e più fermate colore

Strumenti correlati

Visualizzatore Codice SVG

Assistenti per sviluppatori per JSON, formattazione codice e debug.

Generatore Robots.txt

Genera file robots.txt per il tuo sito web

Codificatore/Decodificatore URL

Codifica e decodifica URL e componenti URI

Generatore CSS Flexbox

Playground visuale CSS Flexbox con anteprima dal vivo e generazione codice

Generatore di Regole di Riscrittura

Genera regole di reindirizzamento e riscrittura per Apache (.htaccess), Nginx e ...

Generatore Open Graph

Genera meta tag Open Graph per la condivisione sui social media

Anche su MoreOnlineTools

Strumenti Online Gratuiti

109 strumenti per testo, immagini, sicurezza e sviluppo

Sfoglia Tutti gli Strumenti →
Cheat Sheet per Sviluppatori

Riferimento rapido per Regex, Git, codici HTTP, CSS, Markdown e altro

Sfoglia i Cheat Sheet →
Calcolatrici Online

BMI, prestito, percentuale, mancia, età e altre calcolatrici pratiche

Sfoglia le Calcolatrici →
Raccolte di Strumenti

Workflow curati: sviluppo API, pipeline immagini, audit sicurezza e altro

Sfoglia le Raccolte →