Sombras con transparencias (box-shadow)

Otra posibilidad que podemos aplicar a la propiedad box-shadow es definir un valor de transparencia de la sombra. Para esto debemos utilizar la función rgba, ejemplo:

 box-shadow: 30px 30px 30px rgba(255,0,0,0.3); 

Mediante la función rgba indicamos el color de la sombra con los primeros tres parámetros (en este ejemplo 255 de rojo, 0 de verde y 0 de azul), luego el cuarto parámetro es el índice de transparencia (donde 0 indica que es totalmente transparente la sombra y 1 es totalmente opaca, podemos utilizar cualquier valor entre 1 y 0)

Para confeccionar un recuadro con sombra de color rojo con un índice de transparencia del 50% luego debemos especificarlo de la siguiente manera:

#recuadro1{
  box-shadow: 30px 30px 30px rgba(255,0,0,0.5); 
  border-radius: 20px;  
  background-color:#ddd;
  width:200px;
  padding:10px;
}
box-shadow

Retornar