Una delle novità della sintassi CSS è la possibilità di aggiungere un'ombra agli oggetti per dare la sensazione di profondità. In realtà, molti browser implementavano già questa funzionalità già da tempo attravarso i prefissi CSS, ma ora questa funzionalità è disponibile su tutti i browser senza bisogno prefissi CSS.
Per aggiungere un'ombra a un oggetto dobbiamo usare la proprietà CSS box-shadow e a seconda del tipo di ombra che vogliamo creare abbiamo diversi modi di usarla. In questo primo esempio creiamo un'ombra che viene visualizzata ai lato destro e inferiore di un div.

.shadow {
  box-shadow: 10px 10px 5px #666;
}

I primi due valori indicano per quanto si estende l'ombra dal bordo inferiore e destro dell'oggetto. I caso di valori negativi si intendono i bordi superiore e sinistro. Il terzo valore esprime il fade dell'ombra mentre l'ultimo valore indica il colore.

In questo secondo esempio invece creiamo un'ombra che viene mostrata su tutti i lati.

.shadow {
  box-shadow: 0px 0px 1px 2px #666;
}

Come possiamo vedere i primi due valori sono azzerati e abbiamo un quarto valore che esprime quanto si allarga l'ombra da ogni lato del div.