Generatore di box-shadow CSS

La proprietà CSS `box-shadow` aggiunge uno o più effetti ombra a un elemento HTML. Ogni ombra è definita da fino a sei valori: una parola chiave opzionale `inset`, un offset orizzontale, un offset verticale, un raggio di blur, un raggio di spread e un colore. Gli offset orizzontali positivi spingono l'ombra a destra; gli offset verticali positivi la spingono verso il basso. Più ombre sono separate da virgole e renderizzate dal primo all'ultimo. È il meccanismo CSS principale per aggiungere profondità visiva, gerarchia di elevazione, effetti glow e stili neumorfistici ai componenti UI senza alcuna immagine.

La sintassi completa è: `box-shadow: [inset] offset-x offset-y [blur-radius] [spread-radius] color`. Solo `offset-x`, `offset-y` e `color` sono obbligatori; `blur-radius` e `spread-radius` assumono valore 0 se omessi, e `inset` predefinisce l'ombra esterna. Una tipica ombra card appare così: `box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.12)`. Sovrapponi ombre illimitate separandole con virgole — vengono renderizzate dal primo all'ultimo (la prima è in cima). Questo generatore restituisce la dichiarazione completa incluso il nome della proprietà `box-shadow:`, oppure solo il valore se preferisci.

Il blur-radius controlla la morbidezza del bordo: zero dà un bordo duro e nitido che corrisponde esattamente alla forma dell'elemento; valori più grandi creano una dissolvenza progressivamente più morbida e diffusa. Il spread-radius espande o restringe l'intera ombra prima che il blur venga applicato: valori positivi la espandono oltre il bordo dell'elemento, valori negativi la contraggono verso l'interno. Le ombre con l'aspetto più realistico usano un blur moderato con uno spread leggermente negativo, mantenendo l'ombra vicina all'impronta dell'elemento piuttosto che diffondersi troppo. Questa è la tecnica usata nei preset Deep e Floating.

Aggiungi la parola chiave `inset` all'inizio della dichiarazione dell'ombra: `box-shadow: inset 0px 2px 6px rgba(0, 0, 0, 0.20)`. Un'ombra inset viene disegnata all'interno del box bordo dell'elemento anziché dietro di esso, creando un aspetto incavato o premuto. Gli usi comuni includono: campi di input (per mostrare la profondità del focus), tracce degli switch a levetta, stati attivi dei pulsanti, e contenitori di testo in rilievo. Questo generatore ha un toggle Inset nel pannello di controllo di ogni livello — abilitalo e l'ombra si capovolge immediatamente all'interno dell'elemento nell'anteprima.

Sì — CSS consente un numero qualsiasi di ombre separate da virgole su un singolo elemento. Vengono renderizzate nell'ordine elencato, con la prima ombra in cima. Sovrapporre più livelli è la tecnica chiave per una profondità fluida e realistica — un'unica ombra grande sembra artificiale, mentre tre-cinque livelli graduati mimano come la luce si diffonde fisicamente. Questo generatore supporta fino a otto livelli indipendenti, ciascuno con il proprio offset, blur, spread, colore, opacità e toggle inset. Un'icona occhio ti consente di mostrare/nascondere i singoli livelli per un rapido confronto prima/dopo senza eliminarli.

Il neumorfismo usa due ombre opposte su un elemento il cui colore di sfondo corrisponde alla pagina: un'ombra luminosa (quasi bianca) che punta in alto a sinistra, una scura (nera a bassa opacità) che punta in basso a destra. Questo fa sembrare l'elemento estruso dalla superficie dello sfondo. Una dichiarazione neumorfistica classica: `box-shadow: -6px -6px 12px rgba(255,255,255,0.8), 6px 6px 12px rgba(0,0,0,0.15)`. Lo sfondo dell'elemento deve corrispondere esattamente allo sfondo della pagina affinché l'illusione funzioni. Il preset Neumorphic in questo generatore fornisce un punto di partenza già pronto — imposta lo sfondo dell'anteprima su 'Grigio soft' per vederlo nel contesto.

Usa offset zero, un grande raggio di blur e un valore colorato: `box-shadow: 0px 0px 20px 4px rgba(59, 130, 246, 0.5)`. L'offset zero fa irradiare il bagliore uniformemente in tutte le direzioni. Uno spread positivo spinge il glow più lontano dall'elemento. Combinare due livelli — uno con un blur più piccolo e opacità più alta per un nucleo luminoso, e uno con un blur ampio e opacità più bassa per l'alone ambientale — produce un effetto luminoso più convincente. Il preset Glow Blue dimostra questo con un approccio a due livelli. Cambia il colore in qualsiasi tinta per bagliori personalizzati abbinati al tuo brand.

Invece di un'unica ombra grande, sovrapponi tre-cinque livelli dove ciascuno raddoppia approssimativamente l'offset e il blur dimezzando l'opacità: ad esempio, `0px 1px 2px rgba(0,0,0,0.06), 0px 4px 8px rgba(0,0,0,0.08), 0px 12px 24px rgba(0,0,0,0.06)`. Questa tecnica imita come la luce si diffonde fisicamente da una sorgente puntiforme e rimane convincente a qualsiasi livello di zoom o risoluzione del display. I preset Deep e Floating in questo generatore sono costruiti esattamente su questo principio — tre livelli graduati che appaiono naturali a qualsiasi scala.

`box-shadow` segue sempre il box bordo rettangolare dell'elemento, indipendentemente dall'aspetto visivo dell'elemento. `filter: drop-shadow()` traccia il silhouette del canale alpha effettivo dell'elemento — utile per ritagli PNG trasparenti o icone SVG dove si vuole che l'ombra segua la forma anziché il suo rettangolo di delimitazione. Per i componenti UI standard (card, pulsanti, pannelli, dialog), `box-shadow` è quello corretto: è più veloce da disegnare, supporta la modalità inset, accetta il raggio di spread e consente più livelli sovrapposti. Usa `filter: drop-shadow()` solo quando lo sfondo trasparente dell'elemento è importante per la forma dell'ombra.

No. `box-shadow` è puramente un effetto visivo renderizzato al di fuori del normale flusso di layout. Non sposta mai gli elementi fratelli, non aumenta mai l'area di contenuto scorrevole, e non ha alcun effetto sulla larghezza, altezza, margine o padding calcolati dell'elemento. Le ombre si estendono visivamente oltre il box dell'elemento ma vengono ignorate dal motore di layout. Ciò significa che puoi aggiungere ombre generose a una griglia fitta senza rompere il layout — anche se potresti voler aggiungere `overflow: visible` sul contenitore padre per assicurarti che l'ombra non venga ritagliata.

Una volta costruita la tua ombra, il generatore offre tre formati di output. <strong>Copia CSS</strong> fornisce la dichiarazione completa della proprietà (`box-shadow: …;`) pronta per qualsiasi foglio di stile. <strong>Copia valore</strong> fornisce solo il valore dell'ombra — utile come variabile SCSS, valore di proprietà personalizzata CSS, o entry `extend.boxShadow` di Tailwind. <strong>Stile React</strong> produce il formato camelCase (`boxShadow: '…'`) per oggetti stile inline JSX o Styled Components. Per Tailwind, incolla il valore nel tuo `tailwind.config.js` sotto `theme.extend.boxShadow` per creare una classe di utilità ombra personalizzata.

La maggior parte degli strumenti dedicati al box-shadow offre solo la generazione a livello singolo — cssgenerator.org, ad esempio, fornisce controlli di base ma nessuna libreria di preset e nessuno stacking multi-livello. Il riferimento css-tricks.com è documentazione, non uno strumento interattivo. I CSS Generator di cssmatic.com sono funzionali ma datati e pieni di annunci. Il generatore di UtiloKit supporta fino a otto livelli indipendenti con toggle occhio per livello, otto preset curati che coprono i pattern di design d'ombra più comuni (card, crisp, material, neumorphic, floating, deep, glow, inset well), tre formati di output per diversi framework, e un toggle completo sfondo scuro/chiaro per il controllo del contrasto — tutto senza pubblicità e senza caricamento di dati.

Sì — il generatore box-shadow è completamente responsive. Su iPhone e Android, tutti i cursori sono touch-friendly con maniglie di trascinamento di dimensioni appropriate. L'elemento di anteprima live si adatta agli schermi mobile. I selettori di colore usano il selettore colore nativo del sistema sui browser mobile. Il layout desktop a tre colonne si comprime in un layout verticale a colonna singola pulito su schermi stretti. Tutti i pulsanti di copia usano l'API Web Clipboard, supportata su Safari, Chrome e Firefox sia su iOS che su Android. Non è richiesto il download di alcuna app, non è necessario alcun account — apri l'URL e inizia subito.