CSS box-shadow 생성기

사용 방법

1. 원하는 모양에 가까운 프리셋을 고르거나 레이어 1의 값을 조절합니다.
2. 가로·세로 위치, 흐림, 퍼짐, 불투명도는 슬라이더나 숫자 입력으로 바꿉니다. 숫자로는 슬라이더 범위보다 큰 값도 넣을 수 있습니다.
3. 색은 색상 선택기나 #000000 형식의 색상 코드로 지정합니다. 상자 안쪽에 그림자를 넣으려면 "안쪽 그림자(inset)"를 켭니다.
4. 그림자를 겹치려면 "레이어 추가"를 누릅니다(최대 5겹). 레이어 1이 가장 위에 그려집니다.
5. 밝은 배경과 어두운 배경에서 확인한 뒤 CSS나 Tailwind CSS 클래스를 복사합니다.

주의 사항

• X·Y·퍼짐은 -500~500px, 흐림은 0~500px, 불투명도는 0~100%까지입니다. 범위를 벗어난 값은 끝값으로 맞춥니다. 소수는 둘째 자리까지입니다.
• 단위는 px만 지원합니다. 색은 rgba()로 출력합니다(불투명도 100%여도 rgba(..., 1)로 씁니다).
• Tailwind CSS는 임의 값 문법 shadow-[...]로 출력합니다. v3.0 이상과 v4에서 쓸 수 있고 v2 이하에서는 쓸 수 없습니다. 테마 값으로 바꾸지는 않습니다.
• text-shadow와 filter: drop-shadow()는 다루지 않습니다.
• 입력한 값은 저장하지 않습니다. 페이지를 닫으면 사라집니다.

계산·변환 방식

각 레이어를 "inset X Y 흐림 퍼짐 색" 순서로 쓰고 쉼표로 이어 붙입니다. 0도 단위를 붙여 0px로 씁니다.

Tailwind CSS 출력에서는 레이어 안의 공백을 밑줄(_)로 바꾸고, rgba() 안과 레이어 사이의 쉼표는 공백 없이 씁니다.