Is this tool free to use?

Yes, the core functionality is completely free with no watermarks. Pro plans are available for higher limits.

How secure are my files?

All uploads use 256-bit TLS encryption. Files are deleted from our servers within 1 hour of processing.

Does it work on mobile?

Absolutely. The tool is fully responsive and works in any modern mobile browser.

What file formats are accepted?

Please see the accepted formats listed in the upload area above.

Strumento per Sviluppatori

Generatore CSS Ombre

Crea bellissimi effetti box-shadow e text-shadow visivamente. Aggiungi più livelli, modifica ogni parametro e copia il CSS pronto per la produzione istantaneamente.

✓ Ombra Box ✓ Ombra Testo ✓ Livelli Multipli ✓ Ombra Interna ✓ Preset ✓ Copia CSS

Livelli Ombra

Impostazioni Livello

Livello 1

Offset Orizzontale

Offset Verticale

Raggio Sfocatura

Raggio Espansione

Colore

Opacità

Interna (ombra interna)

Impostazioni Anteprima

Sfondo Pagina

Colore Elemento

Raggio Bordo

Anteprima dal Vivo

CSS Generato

Preset

Ombra Box

Come Usare il Generatore CSS Ombre

Scegli il Tipo di Ombra

Seleziona Ombra Box per elementi (div, card, pulsanti) o Ombra Testo per effetti tipografici.

Regola i Parametri

Controlla offset H/V, raggio sfocatura, espansione, colore e opacità per ogni livello. Aggiungi più livelli per effetti complessi.

Copia & Usa

Clicca Copia CSS per prendere il codice pronto per la produzione e incollalo direttamente nel tuo foglio di stile.

Riferimento Proprietà CSS Ombre

box-shadow

box-shadow: [inset] h v blur spread color;

h-offset - Posizione orizzontale. Negativo = sinistra, positivo = destra.
v-offset - Posizione verticale. Negativo = sopra, positivo = sotto.
blur - Raggio sfocatura. 0 = bordo netto.
spread - Espande (+) o contrae (−) l'ombra.
inset - Fa apparire l'ombra all'interno dell'elemento.

text-shadow

text-shadow: h v blur color;

h-offset - Offset orizzontale dell'ombra.
v-offset - Offset verticale dell'ombra.
blur - Raggio sfocatura dell'ombra del testo.
color - Colore dell'ombra inclusa trasparenza alfa.
Nota: text-shadow non ha espansione o interno.

Domande Frequenti

Posso avere più box-shadow su un singolo elemento?

Sì - CSS supporta livelli di ombra separati da virgole. I livelli elencati per primi appaiono sopra. Usa il pulsante Aggiungi Livello per impilarne quanti ne vuoi.

Cos'è un'ombra interna (inset)?

Aggiungere la parola chiave inset sposta l'ombra all'interno dell'elemento invece che all'esterno, creando un aspetto incavato/premuto utile per input e pulsanti.

Come uso i colori rgba per la trasparenza?

Regola il cursore Opacità - il generatore converte automaticamente il tuo colore hex in notazione rgba() quando l'opacità è inferiore al 100%.

text-shadow supporta espansione o interno?

No. La proprietà CSS text-shadow accetta solo offset h, offset v, sfocatura e colore - non ci sono parametri di espansione o interno per le ombre del testo.

Il CSS generato è compatibile cross-browser?

Sì. Sia box-shadow che text-shadow sono universalmente supportati da IE 9+. Non sono necessari prefissi vendor per i browser moderni.

Posso usarlo per progetti Tailwind CSS?

Sì - copia il valore CSS generato e aggiungilo al tuo tailwind.config.js sotto theme.extend.boxShadow, o usalo come valore arbitrario: shadow-[il-tuo-valore].