Text Shadow 생성기
CSS text-shadow를 시각적으로 만들고 코드를 복사합니다
미리보기에 직접 문장을 입력하고 폰트 크기(12~120px), 글자색, 배경색을 바꿔 가며 그림자 결과를 확인하는 방식이라, 실제 제목이 들어갈 배경 위에서 어떻게 읽히는지 미리 볼 수 있습니다. 그림자마다 X·Y(-20~20px)·블러(0~30px)·투명도·색을 따로 두고 여러 겹을 쌓아 외곽선, 네온, 긴 그림자(long shadow) 효과까지 만들 수 있습니다. 배너 제목이나 이미지 위 캡션의 가독성을 잡아야 하는 디자이너와 퍼블리셔가 자주 찾습니다.
이 도구는 인터넷 연결을 끊어도 동작합니다. 입력한 내용과 파일은 이 브라우저 밖으로 나가지 않습니다.
Hello World
Shadow 1
CSS
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
광고
Text Shadow, 이렇게 쓰세요
글자에 적용되는 text-shadow의 오프셋·블러·색을 미리보기로 확인하며 CSS로 만듭니다.
이미지 위 제목의 가독성을 높이거나, 네온·엠보싱 같은 타이포 효과가 필요할 때 씁니다.
본문 크기 글자에 그림자를 주면 흐려 보입니다. 24px 이상 제목에만 쓰고, 예: 0 2px 8px rgba(0,0,0,.45) 정도로 절제하세요.
같은 카테고리 도구
자주 묻는 질문
Q. 여러 겹 그림자로 외곽선을 만들 수 있나요?
네. 상하좌우 1px 오프셋 그림자 4개를 겹치면 외곽선처럼 보입니다.
Q. 네온 효과는 어떻게 내나요?
글자색을 밝게 두고 같은 계열 색의 그림자를 블러 5px, 10px, 20px로 세 겹 쌓으세요. 어두운 배경색에서 가장 잘 보입니다.
Q. text-shadow 대신 -webkit-text-stroke를 써야 하는 경우는?
굵은 외곽선이 필요하면 text-stroke가 깔끔합니다. 1px 안팎의 얇은 테두리나 부드러운 번짐은 text-shadow 쪽이 브라우저 호환성이 넓습니다.