CSS text-shadow 생성기

X/Y 오프셋, blur, 색상, 투명도를 조정해 CSS text-shadow 코드를 만듭니다.

카테고리: 개발자 도구

언제 사용하나요?

히어로 제목, 배너 문구, 카드 위 텍스트처럼 배경과 글자가 겹치는 UI에서 가독성을 높이거나, 네온·입체감 같은 텍스트 효과를 CSS로 빠르게 맞출 때 사용합니다.

사용 방법

X·Y 오프셋을 조정합니다.
Blur 반경과 Alpha 투명도를 설정합니다.
그림자 색상을 선택합니다.
CSS 코드를 복사합니다.

입력값 안내

슬라이더로 X(-40~40px), Y(-40~40px), Blur(0~60px), Alpha(0~100%)를 조정하고 그림자 색상을 선택합니다.

계산·변환 기준

text-shadow: Xpx Ypx Blurpx rgba(...) 형식으로 조합합니다. 쉼표로 여러 shadow 값을 이어 붙이면 외곽선, 네온, 다중 그림자 효과를 만들 수 있습니다.

사용 예시

텍스트 강조 효과 - 제목, 배너, 버튼 텍스트에 입체감과 가독성을 줄 때 사용합니다.
이미지 위 글자 보정 - 사진이나 그라데이션 배경 위에 올라가는 텍스트가 묻히지 않도록 그림자를 조정합니다.
효과 코드 공유 - 생성된 text-shadow 값을 디자인 리뷰나 컴포넌트 문서에 바로 붙여 넣습니다.

예시

2px 2px 4px rgba(0,0,0,0.4)
X·Y 1px, 흐림 3px 옅은 검정 → 제목 글자에 또렷한 그림자 적용
0 0 12px rgba(59,130,246,0.8) → 파란 네온 텍스트 효과

주의사항

생성된 text-shadow CSS는 참고용입니다. 여러 그림자를 겹치거나 큰 blur 값은 가독성과 성능에 영향을 줄 수 있습니다.
입력 데이터는 브라우저에서만 처리되며 서버로 전송되지 않습니다.

계산·사용 가이드

text-shadow 값 구조

text-shadow는 X 오프셋, Y 오프셋, blur 반경, 색상 순서로 작성합니다. X·Y 값은 그림자의 방향을, blur는 가장자리 흐림 정도를 결정합니다.

가독성 보정

이미지 위 텍스트에는 약한 어두운 그림자를 주면 배경과 글자가 분리됩니다. 그림자가 너무 진하면 텍스트가 지저분해 보이므로 투명도와 blur를 함께 조정하세요.

네온·외곽선 효과

text-shadow 값을 쉼표로 여러 겹 쌓으면 네온 발광이나 얇은 외곽선 같은 효과를 만들 수 있습니다. 같은 색상에 blur 크기를 다르게 두면 자연스럽습니다.

레이아웃 영향

text-shadow는 요소의 실제 크기를 바꾸지 않습니다. 다만 그림자가 주변 요소 위로 보일 수 있으므로 작은 버튼이나 좁은 카드에서는 과한 값을 피하는 것이 좋습니다.

자주 묻는 질문

box-shadow와 다른가요?

박스가 아닌 텍스트 글자 자체에 그림자를 적용합니다.

글자 그림자를 미리 볼 수 있나요?

네. X·Y·흐림·색상을 조절하면 미리보기 텍스트에 즉시 반영됩니다.

외곽선이나 네온 효과도 되나요?

text-shadow 값을 여러 겹 겹치면 글자 외곽선이나 네온 발광 같은 효과를 만들 수 있습니다.

그림자를 여러 겹 넣을 수 있나요?

생성된 text-shadow 값을 쉼표로 이어 붙이면 그림자를 여러 겹 겹쳐 외곽선이나 네온 효과를 만들 수 있습니다.

가독성을 높이려면 어떤 값을 쓰면 좋나요?

밝은 배경에는 어두운 그림자, 어두운 배경에는 밝은 그림자를 낮은 투명도로 넣는 방식이 무난합니다. blur를 너무 크게 주면 글자가 흐려 보일 수 있습니다.

text-shadow가 레이아웃 크기를 바꾸나요?

아니요. text-shadow는 시각 효과만 추가하며 요소의 실제 너비나 높이는 바꾸지 않습니다.