CSS Text Shadow 생성기 무료 온라인: 텍스트 그림자 시각적 생성
19 회 사용2px
2px
4px
50%
Hello World
Text Shadow 팁
시각적 텍스트 그림자
X/Y 오프셋, blur, 색상 조절. 실시간 미리보기.
CSS 코드 준비
text-shadow 자동 생성. 복사하여 CSS에 붙여넣기.
색상과 확산
투명도 조절 가능한 아무 색상. blur가 클수록 부드러운 그림자.
자주 묻는 질문
text-shadow는 어떻게 작동하나요?
text-shadow: X Y blur color. X, Y는 오프셋, blur는 확산, color는 그림자 색상.
여러 그림자를 적용할 수 있나요?
CSS에서는 쉼표로 구분하여 가능. 이 도구는 개별 그림자 생성.
어디에 사용하나요?
깊이감 있는 제목, 이미지 위 가독성, 네온 효과, 레트로 스타일.
이 도구는 다른 화면 해상도에서 픽셀화되거나 흐릿하게 보이는 그림자를 생성합니까?
아니요, 그렇지 않습니다. 이 생성기는 표준 CSS `text-shadow` 속성을 생성합니다. 이러한 속성은 벡터 기반이며 텍스트와 함께 확장됩니다. 고 DPI 디스플레이에서는 선명한 그림자를, 다른 곳에서는 일반 그림자를 얻게 됩니다. 기본 글꼴 크기가 적절하게 설정되었는지 확인하기만 하면 됩니다.
그림자 값의 순서가 중요합니까?
네, 매우 중요합니다. CSS는 text-shadow 값을 X 오프셋, Y 오프셋, 흐림 반경, 색상 순서로 엄격하게 읽습니다. 순서를 섞으면 그림자가 깨지거나 예상치 못한 동작을 합니다. 예를 들어 '2px 2px 4px #000'은 잘 작동하지만 '2px 4px #000 2px'는 의도대로 렌더링되지 않습니다. 이 생성기가 자동으로 순서를 유지하므로 코드를 복사해서 바로 사용할 수 있습니다.
사용 방법
- 미리보기 텍스트 입력
- X, Y 오프셋과 blur 조절
- 그림자 색상 선택
- 실시간 미리보기
- CSS 코드 복사