TIL.2 box-shadow

box-shadow 란
css에서 주는 효과로 박스나 원 같은 도형을 만들고 그림자를 만드는 효과.

구문

CSS

/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

예시

CSS

.play-btn__play__square {
  height: 50px;
  width: 150px;
  border: 3px black solid;
  border-radius: 10px;
  box-shadow: 0 6px 2px -2px black;
}

결과

찾아보니 shadow generator 도 많으니 참고하면 될 것 같다.