Come creo un box-shadow CSS e copio il codice?

Regola i cursori per offset x e y, sfocatura, espansione, Colore e opacità, osservando l'anteprima dal vivo. Poi premi Copia nel riquadro dell'output CSS. Puoi anche partire dai Preset come Morbido, Bagliore o Material 8.

Posso sovrapporre più ombre su un elemento?

Sì. Premi + Aggiungi livello ombra per aggiungere altri livelli, poi riordinali, Nascondi o Rimuovi ciascuno. I livelli vengono uniti con virgole in un unico valore box-shadow.

Come faccio a creare un'ombra interna?

Seleziona un livello e attiva Ombra interna, oppure carica il preset Interno. L'output includerà quindi la parola chiave inset per quel livello.

Posso ottenere una classe Tailwind invece del CSS semplice?

Sì. Oltre alla dichiarazione CSS, lo strumento genera una classe Tailwind con valore arbitrario nella forma shadow-[...], con gli spazi sostituiti da trattini bassi, pronta da incollare nel tuo markup.

C'è un modo più semplice dei cursori per impostare la posizione dell'ombra?

Sì. Trascina il riquadro di anteprima per spostare l'ombra del livello attivo e tieni premuto Shift per un controllo più preciso. Puoi anche cambiare Anteprima sfondo e Colore box per vedere l'ombra sul tuo design.

Sì. Ogni strumento è gratuito, senza account e senza carta di credito. L'elaborazione avviene sul tuo dispositivo e non sui nostri server, ed è proprio questo che ci permette di offrirlo gratis.

Sì. Funziona nei browser mobili recenti su iOS e Android, senza installare nulla.

🎨

Generatore CSS Box Shadow gratis

Costruttore visivo per CSS box-shadow con anteprima live, sovrapposizione multi-strato, selettore colori, toggle inset e copia con un clic. Include preset Material, neumorfismo e bagliore.

Funziona nel tuo browserNessuna registrazione, nessun pop-upNessun accesso richiestoGratis per sempre

Funziona offline una volta caricato

Anteprima sfondo

Trascina la casella per posizionare l'ombra del livello attivo - tieni premuto Maiusc per un controllo fine

box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);

Preset

Colore box

Raggio del bordo (16px)

x (0px)

y (4px)

sfocatura (12px)

diffusione (0px)

Colore

Opacità (15%)

Ombra interna

Usi comuni

Ombre UI per le CarteCrea ombre eleganti delle carte per dashboard, griglie di prodotti e dashboard.
Effetti di Pressione dei PulsantiCrea ombre dei pulsanti che simulano la profondità del mondo reale e gli stati di pressione.
UI Soft NeumorphismCrea il look soft-UI neumorphism con ombre chiare e scure appaiate.
Ombre Modali e PopoverCrea l'aspetto elevato e fluttuante per dialoghi e menu a discesa.
Effetti di Alone e Focus RingCrea effetti di alone brillante, focus ring e highlight in stile neon.

Come funziona

Il generatore di box-shadow è uno strumento React completamente lato client — nessun server, nessuna libreria. Mantiene un elenco di oggetti livello ombra nello stato, assembla stringhe CSS box-shadow valide a ogni modifica usando un formattatore rgba() scritto a mano, e le applica direttamente a un elemento di anteprima tramite la prop style di React così il motore di rendering del browser stesso disegna il risultato istantaneamente.

1
I parametri del livello alimentano il formattatore
Ogni livello ombra memorizza offset x/y, sfocatura, diffusione, un colore hex, e un valore di opacità. A ogni modifica, una piccola funzione shadowToCss converte il colore hex in componenti RGB con una regex, poi assembla la stringa rgba() — ad esempio, 0px 4px 12px 0px rgba(0, 0, 0, 0.15). Livelli multipli sono uniti con virgole.
2
Il browser rende l'anteprima dal vivo
La stringa assemblata viene assegnata alla proprietà stile boxShadow di un elemento div direttamente in JSX. React aggiorna l'attributo DOM, e il motore CSS del browser dipinge l'ombra immediatamente — non c'è canvas o WebGL coinvolto, solo rendering CSS nativo.
3
Il trascinamento per posizionare usa la Pointer Events API
Cliccare e trascinare il riquadro di anteprima chiama setPointerCapture sull'elemento, poi traccia i delta onPointerMove per aggiornare gli offset x e y del livello attivo in tempo reale. Tenere premuto Shift applica un fattore di scala 0,25x per il posizionamento fine.
4
L'output viene copiato negli appunti
Lo strumento produce due formati di output dagli stessi dati del livello: una dichiarazione CSS box-shadow standard, e una classe Tailwind di valore arbitrario (shadow-[...]) dove gli spazi sono sostituiti con underscore secondo le regole di sintassi di Tailwind. La copia con un clic usa navigator.clipboard.writeText.