box-shadow

box-shadow : 요소에 그림자 효과를 주는 CSS속성

 

.box {
  border-radius: 20px;
  background-color: brown;
  width: 200px;
  height: 200px;
  box-shadow: 0 25px 25px rgba(0, 0, 0, 0.5);
}

box-shadow : x축 오프셋, y축 오프셋, 흐림 반경, 그림자 색상

 

애니메이션 적용하기

 

 

.box {
  border-radius: 20px;
  background-color: brown;
  width: 200px;
  height: 200px;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.box:hover {
  transform: translateY(-20px);
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
}

 

transition 속성은 box-shadow도 받으므로 애니메이션 효과가 가능하다