Generatore ombre CSS
Genera ombre CSS
Come usare Generatore ombre CSS
Genera ombre CSS Strumento gratuito online, senza registrazione, senza pubblicità invasiva. Usalo ora.
A cosa servono le ombre CSS?
Le ombre aggiungono profondità, elevazione e gerarchia visiva alle interfacce. Il Material Design di Google, le Human Interface Guidelines di Apple e la maggior parte dei design system moderni usano le ombre sistematicamente per trasmettere quali elementi sono più vicini all'utente — creando un senso di profondità tridimensionale nelle interfacce piatte.
- Elevazione delle card: Un'ombra sottile su un componente card la eleva dallo sfondo, segnalando che è un'unità di contenuto interattiva o autonoma. Le ombre più profonde indicano un'elevazione maggiore — come i Floating Action Button (FAB) nel Material Design di Google.
- Ombre di modal e dropdown: Gli overlay (modal, menu dropdown, tooltip) usano ombre forti per indicare che fluttuano sopra il contenuto della pagina — creando una chiara gerarchia visiva di profondità.
- Indicatori di focus: Le box-shadow possono sostituire gli outline per gli stati di focus:
box-shadow: 0 0 0 3px rgba(123,53,245,0.4)crea un anello di focus visibile senza influenzare il layout — tecnica comune nei design system accessibili. - Leggibilità del testo: Un text-shadow sottile su testo bianco sopra un'immagine garantisce la leggibilità indipendentemente dal contenuto dell'immagine dietro — senza bisogno di un overlay di colore solido che coprirebbe l'immagine.
- Neomorfismo: Lo stile di design neomorfico usa doppie ombre — un'ombra chiara da un lato e una scura dall'altro — per creare un effetto 3D estrudito o incassato che sembra scolpito nello sfondo.
Sintassi di box-shadow: box-shadow: [inset] offset-x offset-y blur-radius spread-radius colore. Si possono impilare più ombre: box-shadow: 0 2px 4px rgba(0,0,0,.1), 0 8px 16px rgba(0,0,0,.05) — tecnica usata nel Material Design di Google per ombre naturali multistrato.
Frequently Asked Questions
Qual è la differenza tra box-shadow e drop-shadow()?
box-shadow si applica alla scatola rettangolare dell'elemento — non segue le forme irregolari come le immagini PNG con sfondo trasparente. La funzione CSS filter drop-shadow() segue la forma effettivamente renderizzata, incluse le aree trasparenti. Usate drop-shadow() per icone e immagini con trasparenza; box-shadow per gli elementi rettangolari come card e pulsanti.
Cosa fa la parola chiave 'inset'?
La parola chiave inset fa apparire l'ombra all'interno dell'elemento invece che all'esterno. Un'ombra inset crea l'aspetto di un elemento affossato o premuto — utile per gli stati di pulsante premuto, i campi di input (effetto di profondità interna) o gli elementi di interfaccia neomorfici incassati.
Cos'è lo spread radius in box-shadow?
Il quarto valore in box-shadow è il raggio di diffusione — espande o contrae l'ombra. Un valore positivo rende l'ombra più grande dell'elemento; uno negativo la rende più piccola. Impostare offset-x e offset-y a 0 con una diffusione positiva crea un effetto di contorno/bagliore uniforme attorno all'elemento.
Perché la mia ombra sembra diversa in Safari rispetto a Chrome?
Le differenze di rendering delle ombre tra browser sono solitamente dovute al rendering sub-pixel e alla correzione gamma. Safari e Chrome usano algoritmi di compositing leggermente diversi. Per risultati coerenti tra browser, usate colori RGBA con valori alfa espliciti invece di opacity, e testate le ombre in entrambi i motori di rendering durante lo sviluppo.
Quante box-shadow si possono impilare?
Non c'è un limite preciso — potete impilare più box-shadow con un elenco separato da virgole. Più ombre impilate con diversi raggi di sfocatura e opacità creano ombre dall'aspetto più naturale che imitano l'illuminazione del mondo reale. Il Material Design di Google definisce specifiche ricette di ombre multistrato per ogni livello di elevazione.
CSS box-shadow vs outline vs border vs filter: drop-shadow()
box-shadow aggiunge un'ombra all'esterno (o all'interno con inset) della scatola — non influisce sul layout. outline disegna una linea all'esterno del bordo — non influisce nemmeno sul layout, comunemente usata per gli indicatori di focus accessibili. border aggiunge una linea all'interno dell'elemento — influisce sul layout. filter: drop-shadow() segue la forma effettivamente renderizzata dell'elemento, incluse le trasparenze. Per l'elevazione e la profondità dell'interfaccia: box-shadow. Per gli anelli di focus: outline o box-shadow. Per le ombre delle icone: drop-shadow().