분류: 개발 도구
CSS Text Shadow 생성기
여러 겹의 text-shadow를 쌓고 CSS를 복사합니다
오프셋, 블러, 색상, 불투명도를 설정하면 그 기본값 하나에서 만들어진 다중 레이어 text-shadow 선언을 얻고, 실시간 미리보기와 완성된 CSS를 복사하는 버튼을 사용할 수 있습니다.
그림자 미리보기
출력
text-shadow: 1px 1px 2px rgba(23, 33, 28, 0.5), 1px 1px 4px rgba(23, 33, 28, 0.39), 2px 2px 6px rgba(23, 33, 28, 0.28);
이 페이지의 모든 처리는 브라우저에서 이루어집니다. 업로드는 없습니다.
이 도구로 할 수 있는 일
text-shadow 하나만으로는 밋밋하고 경계가 딱딱한 윤곽선처럼 보이지만, 부드러운 발광이나 겹겹이 쌓인 드롭섀도 효과를 내려면 오프셋과 블러가 점점 줄어들고 불투명도가 옅어지는 여러 레이어가 필요합니다. 이 도구는 box-shadow 레이어 생성기와 같은 방식으로, 설정한 기본 오프셋, 블러, 색상, 불투명도에서 그 레이어 전체를 자동으로 만들어 주므로 쉼표로 구분된 그림자를 여러 개 손으로 쓰는 대신 그림자 하나만 생각하면 됩니다.
사용 방법
- 생성할 레이어 수와 기본 오프셋, 블러를 설정합니다.
- 색상과 불투명도를 선택합니다.
- 실시간 미리보기를 확인한 다음 text-shadow 선언을 복사합니다.
개인정보
이 도구는 전부 브라우저 안에서 동작합니다. 입력한 내용은 업로드되거나 저장되거나 공유되지 않으며, 탭을 닫으면 사라집니다.
자주 묻는 질문
- 레이어를 늘리면 왜 그림자가 더 부드러워지나요?
- 레이어마다 텍스트 쪽으로 크기가 줄어들면서 불투명도가 옅어지므로, 여러 레이어가 함께 하나의 딱딱한 그림자 대신 부드러운 그러데이션처럼 보입니다.
- 서버로 전송되는 것이 있나요?
- 없습니다. 선언은 설정한 값으로 페이지에서 계산되며, 그래서 미리보기가 즉시 갱신됩니다.
- 네온이나 발광 효과에도 쓸 수 있나요?
- 네. 밝은 색상에 큰 블러와 여러 레이어를 쓰면 발광처럼 보이고, 어두운 색상에 작은 오프셋과 낮은 블러를 쓰면 은은한 입체 그림자처럼 보입니다.