css 그림자 효과 주기 (box-shadow)

.box1 {
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2);
}
.box2 {
  box-shadow: 0 0 40px rgba(30, 144, 255, 0.5);
}
.box3 {
  box-shadow: 10px 10px crimson;
}
.box4 {
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2);
}
.box5 {
  box-shadow: inset 40px 10px 20px rgba(255, 255, 255, 0.9);
}
.box6 {
  box-shadow: inset 0 0 100px #000;
}

box-shadow 속성은 x위치_y위치_번짐 정도_색상으로 이뤄져 있으며

앞에 inset을 추가해 주면 내부 그림자로 적용된다.

.textshadow {
  font-size: 50px;
  color: gold;
  text-shadow: 5px 5px 2px dodgerblue,
    10px 10px 2px rgba(39, 112, 186, 0.623);
}

text-shadow도 box-shadow와 사용법은 같으며

shadow속성은 쉼표로 그림자를 중첩시킬 수 있다.

shadow를 많이 중첩시키면 네온사인 같은 효과도 줄 수 있다.