6XC

CSS 텍스트 그림자 생성기

오프셋, 흐림, 색상, 불투명도를 조정해 text-shadow를 디자인하고 샘플 텍스트로 실시간 미리보기를 확인하세요.

조회수 1,270회

샘플 제목

text-shadow 속성이란

문법: text-shadow: x y 흐림 색상(box-shadow와 달리 번짐 정도는 지정할 수 없습니다). 은은한 그림자는 제목을 페이지에서 살짝 띄워 보이게 하고, 흐림을 0으로 두고 오프셋을 크게 주면 레트로한 "선명한 그림자" 스타일이 되며, 쉼표로 구분한 여러 그림자를 겹치면 윤곽선이나 네온 효과를 표현할 수 있습니다.

자주 묻는 질문

네온 효과는 어떻게 만드나요?

오프셋을 0으로 두고, 밝은 색으로 흐림을 점점 키운 그림자를 겹쳐 쌓으세요: 0 0 6px, 0 0 12px, 0 0 24px — 모두 같은 네온 색으로, 어두운 배경 위에 적용합니다.

text-shadow는 접근성에 영향을 주나요?

강한 그림자는 가독성을 해칠 수 있습니다. 본문 텍스트에는 그림자를 넣지 말고 큰 제목에만 효과를 적용하세요. 적용 후에는 항상 명암 대비를 확인하세요.

댓글

아직 댓글이 없습니다 — 첫 댓글을 남겨보세요!

비슷한 도구

CSS 그라데이션 생성기 실시간 미리보기로 선형, 방사형, 원뿔형 CSS 그라데이션을 디자인하고 코드를 복사하세요. 생성하기 CSS 박스 그림자 생성기 오프셋, 흐림 정도, 퍼짐, 색상, 불투명도, 안쪽 그림자(inset)를 시각적으로 조정하며 실시간 미리보기로 그림자를 디자인하세요. 생성하기 CSS 모서리 둥글기 생성기 각 모서리를 개별적으로 또는 한 번에 px나 %로 둥글리고, 실시간 미리보기와 복사 가능한 CSS를 확인하세요. 생성하기 CSS 글래스모피즘 생성기 실시간 미리보기로 유리(글래스모피즘) 효과를 디자인하세요 — 흐림, 투명도, 색조, 테두리를 조절하고 CSS를 복사하세요. 생성하기