도구 소개
텍스트 그림자 생성기는 글자 모양에 그림자를 추가하며 오프셋, 흐림, 색상, 불투명도를 지원합니다. 미리보기 문구는 일반 텍스트로 표시되므로 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은 없습니다. 검증된 색상 채널과 불투명도로 그림자 색상을 구성합니다.
주요 용도
- 제목과 포스터 문구의 효과를 조절합니다.
- 브랜드 문구에 부드러운 그림자를 만듭니다.
- 텍스트 그림자와 박스 그림자의 설정 차이를 이해합니다.
개인정보 안내
모든 입력 처리, 계산, CSS 생성, 미리보기는 현재 브라우저에서 이루어집니다. 사용자 내용을 업로드하지 않으며 백엔드, 데이터베이스, 온라인 API, 외부 CDN을 사용하지 않습니다. 입력값은 자동 저장되지 않습니다.
FAQ
text-shadow와 box-shadow는 어떻게 다른가요?
text-shadow는 글자 모양을 따라 그려지고 box-shadow는 요소의 박스에 적용됩니다.
text-shadow에는 왜 spread가 없나요?
표준 text-shadow 문법에는 두 오프셋, 선택적 흐림 반경과 색상만 있으며 확산 반경은 없습니다.
text-shadow를 여러 개 설정할 수 있나요?
CSS에서는 쉼표로 여러 텍스트 그림자를 연결할 수 있습니다. 이 페이지는 단일 그림자 생성에 집중합니다.
미리보기 문구의 HTML이 실행되나요?
아니요. 입력값을 텍스트 노드로 표시하므로 태그와 스크립트도 일반 문자로만 처리됩니다.