Generatore Box Shadow CSS Gratis: Ombra di Riquadro Visuale Online

A Regola controlli: offset, blur, spread, colore. Aggiornamento in tempo reale.

A Ombra verso l'interno del riquadro.

A Sì, codice CSS con un clic.

A Sì, ma solo se animi opacità o colore. Spostare offset o sfocatura costringe il browser a ricalcolare il layout a ogni frame. Sul mobile è un disastro per le prestazioni. Usa transizioni sull'opacità o un pseudo-elemento per movimenti più fluidi. Verifica l'effetto con l'anteprima live del generatore prima di implementarlo.

A Certo, separale con virgole nel generatore. Clicca su "Aggiungi ombra" per creare un nuovo livello. Due ombre con offset diversi simulano una carta sollevata — una morbida e profonda, l’altra più netta. L’anteprima live mostra tutti i livelli in tempo reale.

A Sì, non sono affatto intercambiabili. box-shadow crea un rettangolo attorno al box dell'elemento — angoli compresi. filter: drop-shadow segue invece la forma effettiva del contenuto. Una PNG trasparente con bordi irregolari ottiene un'ombra perfettamente sagomata. Usa box-shadow per card, pulsanti e componenti UI. Ricorri a drop-shadow per loghi o immagini ritagliate. Prova qui: applica box-shadow a un elemento circolare, poi passa a drop-shadow nel tuo CSS. La differenza la vedi all'istante.

A Succede quando usi un raggio di sfocatura troppo piccolo — sotto i 2px diventa ruvido sui display Retina. Il browser disegna l'ombra sui pixel fisici e senza abbastanza morbidezza compaiono i gradini. Imposta lo sfocato ad almeno 3-4px per un risultato liscio. L'anteprima dal vivo del generatore te lo mostra in tempo reale: ingrandisci per controllare prima di copiare il codice.

A I browser attuali come Chrome, Firefox e Safari renderizzano le proprietà box-shadow in modo coerente secondo gli standard W3C. Purtroppo le vecchie versioni di Internet Explorer non leggono questo codice e l'effetto non verrà mostrato affatto. Ti consiglio di testare il tuo lavoro su Chrome versione 110 o successiva per verificare che il raggio di sfocatura sia perfetto. Se hai bisogno di compatibilità totale, imposta un bordo semplice nel tuo CSS come soluzione di riserva.

A Ottieni un bagliore uniforme su tutti e quattro i lati — nessuna direzione, solo un alone. È il trucco dietro gli effetti neon morbidi e gli anelli di focus. Abbinalo a un blur ampio (25px o più) e a un colore a bassa opacità come rgba(0,0,0,0.15) per un'ombra ambientale delicata. Se aumenti anche il valore di spread, l'ombra si espande in modo uniforme verso l'esterno, simulando un bordo più spesso. Prova ad attivare inset con le stesse impostazioni — il risultato è completamente diverso, una vignettatura interna.