:: Sombras en CSS

En CSS3 podemos establecer sombras sobre diversos elementos por medio de "text-shadow" y "box-shadow".
Un sencillo ejemplo de su uso sería el siguiente:
< !DOCTYPE html >
< html lang="es" >
< head >
< meta charset="UTF-8" >
< title >Text Shadow y Box Shadow< /title >
< style >
body{
font-family: trebuchet ms;
display: flex;
justify-content: space-around;
flex-direction: column;
margin: 40px;
}
h1{
color: #000;
text-shadow: 0 0 20px #dadada;
}
input{
font-size: 1em;
background-color: #fff;
border: 1px solid #dcdcdc;
border-radius: 5px;
padding: 8px;
width: 400px;
box-shadow: 0 0 20px #dedede;
}
div {
padding: 20px;
background-color: #333;
color: #ddd;
width: 300px;
font-size: 1em;
box-shadow: 0 0 20px #dcdcdc;
border-radius: 5px;
}
< /style >
< /head >
< body >
< h1 >Texto con sombra< /h1 >
< br />
< input type="text" placeholder="Introduzca un valor" />
< br />
< div >Efecto sobre una capa< /div >
< /body >
< /html >


La salida del código anterior sería algo como esto: