Generatore di ombre di scatole CSS

Come usare il generatore di CSS Box Shadow

1. Imposta offset X e Y — Trascina i cursori di offset orizzontale e verticale per posizionare l'ombra rispetto all'elemento. Un X positivo sposta l'ombra a destra; un negativo la sposta a sinistra. Un Y positivo la sposta in basso; un negativo la sposta in alto.
2. Regola il raggio di sfocatura — Valori di sfocatura più alti producono ombre più morbide e diffuse. Una sfocatura di 0 produce un'ombra netta e dai bordi duri.
3. Controlla il raggio di diffusione — La diffusione espande o contrae l'ombra oltre le dimensioni dell'elemento. Valori positivi rendono l'ombra più grande; valori negativi la rimpiccioliscono.
4. Scegli il colore e l'opacità dell'ombra — Scegli un colore qualsiasi con il selettore colori e usa il cursore dell'opacità per controllare la trasparenza. Le ombre semi-trasparenti (ad es. rgba con bassa alfa) appaiono più naturali sulla maggior parte degli sfondi.
5. Attiva l'ombra interna (Inset) — Seleziona l'opzione "Inset" per capovolgere l'ombra all'interno dell'elemento, creando un effetto pressato o in rilievo.
6. Applica un preset — Clicca su uno qualsiasi dei preset predefiniti per stili di ombra classici istantanei.
7. Copia il codice CSS — Premi "Copia" per copiare la dichiarazione box-shadow generata negli appunti.

Comprendere la proprietà CSS box-shadow

box-shadow: [inset] offset-x offset-y [blur] [spread] color;

• offset-x — Distanza orizzontale dell'ombra dall'elemento.
• offset-y — Distanza verticale dell'ombra dall'elemento.
• blur-radius — La morbidezza dei bordi dell'ombra. Zero significa nitido.
• spread-radius — Controlla quanto l'ombra si espande o si restringe.
• color — Qualsiasi colore CSS valido (HEX, RGB, RGBA, HSL). RGBA è consigliato perché consente il controllo dell'opacità in un singolo valore.
• inset — Parola chiave opzionale che inverte la direzione dell'ombra, posizionandola all'interno del bordo dell'elemento.

Preset di Box Shadow — Quando Usare Ogni Stile

Ombra Esterna vs. Ombra Interna — Qual è la Differenza?

• Ombra esterna crea l'illusione che un elemento sia sollevato sopra la superficie della pagina — ideale per card, pulsanti e contenitori.
• Ombra interna fa apparire un elemento incassato o premuto nella pagina — comunemente usata per stati attivi dei pulsanti, campi di input di testo e "pozzi".

Consigli per Ombre CSS Box dall'Aspetto Naturale

• Usa colori RGBA con bassa opacità (0.10–0.20) piuttosto che colori completamente opachi.
• Mantieni la direzione dell'ombra coerente in tutta la pagina (tipicamente verso il basso e leggermente a destra, simulando una fonte di luce in alto a sinistra).
• Sovrapponi più ombre per una profondità più realistica (ombra ampia e morbida + ombra stretta e scura).
• Evita valori di sfocatura eccessivamente grandi su piccoli elementi — sembrano sproporzionati.
• Le ombre colorate (es. bagliore blu su un pulsante blu) sono una tecnica di design moderna per una profondità coerente con il marchio.

CSS Box Shadow vs. filter: drop-shadow() — Differenze Chiave

• box-shadow rispetta il riquadro di delimitazione rettangolare dell'elemento indipendentemente dalla trasparenza.
• drop-shadow() segue la forma visibile effettiva di un elemento (incluse le PNG trasparenti).
• box-shadow supporta inset; drop-shadow() no.
• box-shadow supporta più livelli impilati; drop-shadow() no.

Supporto Browser e Compatibilità Cross-Browser

Casi d'Uso Comuni per le Ombre CSS Box

• Componenti UI a schede — Elevare le schede sopra lo sfondo di una pagina.
• Barre di navigazione — Aggiungere un'ombra inferiore per creare profondità all'intestazione.
• Pulsanti — Simulare un effetto di pressione 3D negli stati hover/active.
• Modali e finestre di dialogo — Separare le sovrapposizioni dallo sfondo.
• Input dei moduli — Bagliore interno nello stato di focus per accessibilità e UX.
• Immagini — Inquadrare foto o miniature con un sottile bordo d'ombra.
• Tooltip — Elementi micro-UI fluttuanti con una sottile ombra.