도구 소개
텍스트 그림자 생성기는 글자 모양에 그림자를 추가하며 오프셋, 흐림, 색상, 불투명도를 지원합니다. 미리보기 문구는 일반 텍스트로 표시되므로 HTML 태그를 포함해도 페이지 코드로 실행되지 않습니다.
사용 방법
- 미리 보고 싶은 문구를 입력하세요.
- 가로·세로 오프셋과 0 이상의 흐림 반경을 조절하세요.
- 그림자 색상과 불투명도를 선택하고 실시간 텍스트 효과를 확인하세요.
- CSS를 복사하거나 ‘초기화’로 처음 설정을 복원하세요.
사용 예제
- 작은 오프셋과 낮은 불투명도는 은은한 텍스트 그림자에 적합합니다.
- 오프셋을 0으로 하고 흐림을 높이면 부드러운 발광 효과를 만들 수 있습니다.
- 한글, 영문, 기호를 입력하여 글자 모양별 그림자를 비교하세요.
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);작동 원리 및 CSS 설명
text-shadow의 구조는 offset-x offset-y blur-radius color입니다. 글자 모양에 적용되며 spread-radius와 inset은 없습니다. 검증된 색상 채널과 불투명도로 그림자 색상을 구성합니다.
주요 용도
- 제목과 포스터 문구의 효과를 조절합니다.
- 브랜드 문구에 부드러운 그림자를 만듭니다.
- 텍스트 그림자와 박스 그림자의 설정 차이를 이해합니다.
개인정보 안내
입력 내용과 결과는 브라우저 안에서만 처리되며 업로드되거나 자동으로 저장되지 않습니다. 보관할 결과는 복사해서 저장하세요.
FAQ
text-shadow와 box-shadow는 어떻게 다른가요?
text-shadow는 글자 모양을 따라 그려지고 box-shadow는 요소의 박스에 적용됩니다.
text-shadow에는 왜 spread가 없나요?
표준 text-shadow 문법에는 두 오프셋, 선택적 흐림 반경과 색상만 있으며 확산 반경은 없습니다.
text-shadow를 여러 개 설정할 수 있나요?
CSS에서는 쉼표로 여러 텍스트 그림자를 연결할 수 있습니다. 이 페이지는 단일 그림자 생성에 집중합니다.
미리보기 문구의 HTML이 실행되나요?
입력은 텍스트로 처리되며 HTML이나 스크립트는 실행되지 않습니다.