그림자 크기 설정

box-shadow 속성의 네번째 값으로 그림자 크기를 설정합니다.

div {
  background-color: yellow;
  box-shadow: 0 0 0 20px;
  height: 200px;
  width: 300px;
}

그림자 색상 설정

box-shadow 속성의 다섯번째 값으로 그림자 색상을 설정합니다.

div {
  background-color: yellow;
  box-shadow: 0 0 0 20px gray;
  height: 200px;
  width: 300px;
}

그림자 위치 설정

box-shadow 속성의 첫번째 값으로 그림자 위치를 왼쪽 또는 오른쪽으로 이동합니다. 0보다 작은 값을 입력하면 왼쪽으로 이동합니다.

그림자 위치 설정

box-shadow 속성의 두번째 값으로 그림자 위치를 위 또는 아래로 이동합니다. 0보다 작은 값을 입력하면 위로 이동합니다.

Blur 범위 설정

실제 그림자처럼 보이도록 그림자 주변을 뭉갤 수 있습니다. 이를 blur 효과라고 하는데 box-shadow 속성의 세번째 값으로 뭉갤 범위를 설정할 수 있습니다.

그림자 안으로 넣기

지금까지 그림자는 바깥을 향했는데 안을 향하도록 할 수 있습니다. 이렇게 하면 그림자 효과가 있을 때와 없을 때의 그림자를 포함한 크기가 같아집니다.

div {
  background-color: yellow;
  box-shadow: 0 0 0 20px inset;
  height: 200px;
  width: 300px;
}

예제

box-shadow 속성의 각 값을 잘 조합하면 의미있는 그림자 효과를 줄 수 있습니다.

div {
  background-color: white;
  box-shadow: 2px 1px 7px 3px rgb(167, 167, 167);
  height: 200px;
  width: 300px;
}