CSS 그림자 생성기는 "박스 그림자", "뉴모피즘", "글래스모피즘" 세 가지 모드에서 값을 조절하고 CSS를 바로 복사하게 해 줍니다. 박스 그림자는 여러 겹을 쌓을 수 있고, 층마다 가로/세로 오프셋, 흐림, 번짐, 색상, 불투명도, inset을 따로 지정합니다. 뉴모피즘은 배경색을 기준으로 밝은 층과 어두운 층을 자동 계산하고 볼록/오목을 전환할 수 있습니다. 글래스모피즘은 반투명 배경, backdrop-filter 흐림, 밝은 테두리, 둥근 모서리를 조합합니다.

1. 01박스 그림자, 뉴모피즘, 글래스모피즘 중 하나를 고릅니다.
2. 02박스 그림자 모드에서는 층을 여러 개 추가할 수 있습니다. 한 층을 선택해 X/Y, 흐림, 번짐, 불투명도, 색상, 내부 그림자를 조정합니다.
3. 03뉴모피즘에서는 배경색과 볼록/오목을 고르고 거리, 흐림, 명암 강도를 맞춥니다.
4. 04글래스모피즘에서는 색조, 배경 투명도, 흐림, 테두리 투명도를 설정하고 아래에서 실시간 생성된 CSS를 복사합니다.

• 박스 그림자의 X/Y는 -100–100 px, 흐림은 0–200 px, 번짐은 -50–50 px, 불투명도는 0–100%이며 층은 최소 한 개를 남겨야 합니다.
• 뉴모피즘 거리는 2–50 px, 흐림은 0–100 px, 강도는 5–30%입니다. 밝고 어두운 색은 colord로 배경색을 darken/lighten해 구합니다.
• 글래스모피즘 흐림은 0–40 px이고 배경과 테두리 투명도는 0–100%입니다. 코드에는 표준 속성과 -webkit-backdrop-filter가 함께 출력됩니다.
• 미리보기는 브라우저 CSS 효과만 보여 줍니다. 실제 페이지에서는 상위 배경, 겹침 순서, 성능, 브라우저 지원에 따라 달라집니다.
• 미지원 기능: 이미지 내보내기, 복잡한 SVG 그림자 만들기, 프로젝트 스타일시트에 자동으로 쓰기.

모든 설정값과 CSS는 브라우저의 현재 페이지에서만 계산되고 업로드되거나 저장되지 않습니다.