CSS 텍스트 그림자 생성기
오프셋·번짐·색상을 조절해 text-shadow를 미리보고 CSS로 복사
도구를 불러오는 중…
🔒 이 도구는 100% 브라우저에서 처리됩니다. 업로드한 파일과 입력한 내용은 서버로 전송되지 않습니다.
가로·세로 오프셋, 번짐(blur), 색상과 불투명도를 조절해 텍스트 그림자를 실시간으로 확인하고 CSS를 만들어주는 도구입니다. 배너 문구나 제목에 입체감을 주고 싶은 웹 디자이너·퍼블리셔가 값을 눈으로 맞춰 바로 복사해 쓰기에 좋습니다.
사용 방법
- 미리보기 텍스트와 글자·배경 색상을 원하는 대로 설정합니다.
- 오프셋과 번짐 슬라이더로 그림자의 위치와 부드러움을 조절합니다.
- 그림자 색상과 불투명도를 골라 원하는 느낌을 완성합니다.
- 생성된 text-shadow CSS를 복사해 스타일에 붙여넣습니다.
자주 묻는 질문
- 오프셋을 음수로도 줄 수 있나요?
- 네. 가로·세로 오프셋 슬라이더는 -50px부터 +50px까지 조절할 수 있어, 그림자를 왼쪽·위쪽 방향으로도 자유롭게 배치할 수 있습니다.
- 입력한 텍스트나 색상이 서버에 저장되나요?
- 저장되지 않습니다. 미리보기와 CSS 생성은 전부 브라우저에서 이루어지며, 어떤 정보도 서버로 전송하거나 기록하지 않습니다.
- 색상 불투명도는 어떻게 반영되나요?
- 선택한 그림자 색상과 불투명도 슬라이더 값을 합쳐 rgba() 형태로 변환하므로, 반투명하고 자연스러운 그림자까지 그대로 코드에 담깁니다.