CSS Text-Shadow 생성기
신규라이브 미리보기로 CSS 텍스트 그림자를 조정하고 코드 복사.
Select a layer above to edit it.
Runs entirely in your browser. Nothing is uploaded.
실시간 미리보기로 CSS 텍스트 그림자 디자인하기
이 CSS 텍스트 그림자 생성기는 깊이감, 글로우, 아웃라인 효과를 시각적으로 설계하고 바로 쓸 수 있는 CSS를 복사할 수 있게 해줍니다. 큰 미리보기 영역을 직접 클릭해 원하는 텍스트를 입력하고, 오프셋·블러·불투명도 슬라이더를 드래그하고, 색상을 선택하면 실시간으로 text-shadow가 업데이트됩니다.
폰트 패밀리·크기·굵기를 변경하고 텍스트 색상을 지정한 뒤, 배경을 밝음·회색·어두움·체커보드로 전환해 다양한 배경에서 그림자가 어떻게 보이는지 확인하세요. 이는 네온 텍스트와 글로우 텍스트 효과에 특히 중요합니다. 두 효과 모두 어두운 배경에서만 제대로 보이기 때문입니다.
text-shadow 문법 완벽 이해
단일 CSS 그림자는 text-shadow: offset-x offset-y blur-radius color로 작성합니다. offset-x와 offset-y는 그림자를 가로·세로로 이동시키고(음수값은 위쪽이나 왼쪽으로), blur-radius는 가장자리를 부드럽게 만들며(0이면 선명), color는 색조를 결정합니다. 은은한 깊이감에는 반투명 검정, 글로우 효과에는 밝은 색상을 주로 사용합니다.
가장 고전적인 가독성 좋은 그림자는 text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4)입니다. 두 오프셋을 모두 0으로 설정하고 블러를 높이면 텍스트 주변에 부드러운 후광이 생깁니다. 밝은 색상(예: #00eaff)에 점점 커지는 블러 값을 여러 겹 쌓으면 네온 글로우가 완성됩니다.
여러 그림자 쌓기: 네온, 3D, 아웃라인, 롱 섀도우
text-shadow의 진정한 강점은 레이어 쌓기입니다. 쉼표로 구분해 하나의 선언에 여러 텍스트 그림자를 나열하면 브라우저가 순서대로 렌더링합니다. 같은 밝은 색상으로 블러를 점점 늘리며 쌓으면 네온/글로우 효과가 되고, 우하향 방향으로 오프셋을 단계적으로 늘리며 색을 어둡게 하면 3D 입체 텍스트가 됩니다. 동일한 평면 오프셋을 10겹 이상 반복하면 롱 섀도우, 자형 주변에 4~8개의 단단한 그림자를 배치하면 아웃라인 텍스트가 완성됩니다.
프리셋 갤러리 — Soft·Neon·Glow·3D·Long shadow·Outline·Retro·Fire·Letterpress — 를 출발점으로 삼아 레이어를 추가·삭제·재정렬하며 자유롭게 조정해 보세요.
CSS, Tailwind, React Native 복사
프로젝트에 맞게 내보낼 수 있습니다. CSS 복사는 표준 text-shadow 선언을 제공하고, Tailwind 복사는 [text-shadow:2px_2px_4px_#00000066]와 같은 임의 속성 클래스를 생성합니다(Tailwind v4 네이티브 text-shadow-* 유틸리티와 호환). React Native 복사는 첫 번째 레이어를 textShadowColor·textShadowOffset·textShadowRadius로 변환합니다.
브라우저 호환성 좋은 소식: text-shadow는 완전히 표준화되어 있어 현재 모든 브라우저에서 -webkit-나 -moz- 접두사 없이 작동합니다.
CSSmatic, css.generator.cool 등과의 비교
대부분의 온라인 CSS 텍스트 그림자 도구는 단일 레이어만 지원합니다. CSSmatic의 텍스트 그림자 섹션은 슬라이더 세트를 제공하지만, 네온이나 3D 효과를 위해 레이어를 쌓으려면 추가 선언을 직접 작성해야 합니다.
UtiloKit은 다중 레이어 쌓기, 한 번의 클릭으로 완전한 그림자 스택을 로드하는 9가지 프리셋, 편집 가능한 실시간 미리보기, CSS·Tailwind·React Native 세 가지 형식 원클릭 복사, 공유 링크를 하나의 도구에 통합합니다. 회원가입 없음, 파일 업로드 없음.
text-shadow 대 box-shadow
자주 혼동되는 부분입니다. text-shadow는 글자(자형)의 외곽선을 따라 그림자를 투영하고, box-shadow는 요소의 직사각형 박스를 따라 투영합니다. text-shadow에는 스프레드 반지름도 inset 키워드도 없어 box-shadow처럼 내부 그림자를 만들 수 없습니다. 텍스트 그림자는 헤딩·로고·레이블에, 박스 그림자는 카드·버튼에 사용하세요.
텍스트에 음각이나 스탬프 느낌을 주려면 어두운 텍스트 바로 아래에 밝은 그림자를 배치하는 트릭을 씁니다(Letterpress 프리셋 참고). 굵은 텍스트 외곽선에는 -webkit-text-stroke 속성이 8방향 그림자 쌓기보다 더 깔끔합니다.
가독성 높은 그림자 팁 — 그리고 개인정보 보호
그림자는 스타일 포인트지, 대비의 대안이 아닙니다. 사진 위의 텍스트에는 0 1px 3px rgba(0, 0, 0, 0.5) 같은 낮은 불투명도의 단일 그림자 하나로 가독성을 높일 수 있습니다. 무거운 네온·3D 효과는 대형 디스플레이 헤딩에만 사용하고, 텍스트 대비가 WCAG 기준을 충족하는지 항상 확인하세요.
설치할 것도, 계정을 만들 것도 없습니다. 모든 미리보기와 생성된 CSS는 브라우저에서 로컬로 처리되므로 입력한 텍스트가 기기를 벗어나지 않습니다.
Frequently asked questions
텍스트 그림자는 어떻게 적용하나요?
텍스트 요소에 CSS 속성 text-shadow를 추가합니다. 단축 형식은 text-shadow: offset-x offset-y blur-radius color입니다. 예를 들어 text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4)는 오른쪽 2px, 아래 2px, 블러 4px의 부드러운 그림자를 만듭니다.
CSS에서 text-shadow란 무엇인가요?
text-shadow는 요소의 텍스트 뒤에 하나 이상의 그림자를 그리는 CSS 속성입니다. 각 그림자는 수평 오프셋(X), 수직 오프셋(Y), 선택적 블러 반지름, 색상 최대 4개의 값을 받습니다. 예: text-shadow: 1px 1px 2px #000000.
CSS에서 그림자를 추가하려면?
텍스트에는 요소 규칙에 text-shadow를 사용합니다. 예: h1 { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }. 박스·카드·버튼에는 box-shadow를 사용합니다.
디자인 툴에서 텍스트에 그림자를 추가하려면?
Figma·Sketch·Photoshop 등의 디자인 툴에서 텍스트 레이어에 드롭 섀도우 효과를 추가하고 X/Y 오프셋·블러·색상을 설정합니다. 이 4가지 값이 CSS와 거의 1:1 대응합니다. Figma X 2, Y 2, 블러 4, 검정 40% = text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4).
글로우 또는 네온 텍스트 효과를 만드는 방법은?
네온 글로우는 같은 밝은 색상의 여러 그림자를 오프셋 0, 블러를 점점 늘리며 쌓은 것입니다. 예: text-shadow: 0 0 5px #00eaff, 0 0 10px #00eaff, 0 0 20px #00eaff, 0 0 40px #0066ff; 흰색 텍스트, 어두운 배경. 여기서 Neon 프리셋을 로드하면 즉시 생성됩니다.
3D 텍스트 또는 롱 섀도우를 만들려면?
두 효과 모두 블러 없이 오프셋이 있는 여러 그림자를 사용합니다. 3D 입체 텍스트는 점점 어두워지는 색상으로 우하향 레이어를 쌓습니다. 3D와 Long shadow 프리셋이 이 레이어 스택을 자동으로 생성합니다.
text-shadow로 아웃라인 텍스트를 만드는 방법은?
텍스트 주변 각 방향에 블러 0인 단단한 그림자를 4개(또는 8개) 배치합니다. 예: text-shadow: -1px -1px 0 #111, 1px -1px 0 #111, -1px 1px 0 #111, 1px 1px 0 #111; 흰색 텍스트에 얇은 검정 아웃라인이 생깁니다.
여러 텍스트 그림자를 만드는 방법은?
단일 text-shadow 선언 안에서 쉼표로 구분합니다: text-shadow: 1px 1px 2px #000, 0 0 8px #0ff;. 브라우저는 순서대로 렌더링하며 첫 번째 그림자가 최상위에 옵니다. 네온·3D·파이어·아웃라인 효과가 모두 이 방식으로 구성됩니다.
text-shadow를 inset으로 만들 수 있나요?
아니요. box-shadow와 달리 text-shadow 속성에는 inset 키워드나 스프레드 반지름이 없습니다. 밝은 배경에 새긴 느낌을 시뮬레이션하려면 진한 회색 텍스트 바로 아래에 미묘한 밝은 그림자를 추가합니다. 예: text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);. Letterpress 프리셋이 이 트릭을 보여줍니다.
Tailwind CSS에서 텍스트 그림자를 설정하려면?
Tailwind CSS v4에는 네이티브 텍스트 그림자 유틸리티(text-shadow-sm·text-shadow-md·text-shadow-lg)가 있습니다. 커스텀 값에는 공백을 언더스코어로 바꾼 임의 속성을 사용합니다: class="[text-shadow:2px_2px_4px_#00000066]".
text-shadow에 -webkit- 또는 -moz- 접두사가 필요한가요?
아니요. text-shadow는 완전히 표준화되어 있어 현재 모든 브라우저에서 접두사 없이 지원됩니다. text-shadow: 1px 1px 2px #000; 하나면 충분합니다.
text-shadow와 box-shadow의 차이는 무엇인가요?
text-shadow는 자형(글자 자체) 형태에서 그림자를 투영하고, box-shadow는 요소의 직사각형 박스에서 투영합니다. text-shadow에는 스프레드 반지름과 inset 옵션이 없고, box-shadow에는 둘 다 있습니다.
가독성을 높이기 위한 은은한 그림자를 추가하려면?
작은 오프셋과 몇 픽셀의 블러를 가진 낮은 불투명도 어두운 그림자를 사용합니다. 예: text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);. 사진이나 그라데이션 배경에서 흰색 또는 밝은 텍스트를 돋보이게 해 대비를 개선합니다.
CSSmatic 같은 다른 text-shadow 도구와 어떻게 다른가요?
CSSmatic에는 텍스트 그림자 섹션이 있지만 단일 레이어만 처리합니다. 네온·3D·아웃라인 효과를 위해 여러 그림자를 쌓으려면 코드를 직접 편집해야 합니다. UtiloKit은 다중 레이어 쌓기·명명된 프리셋·라이브 미리보기·CSS/Tailwind/React Native 원클릭 내보내기를 통합한 유일한 무료 도구입니다.
생성된 CSS를 어떻게 복사하나요? 오프라인에서도 사용 가능한가요?
CSS 복사를 클릭하면 바로 붙여넣을 수 있는 선언을, Tailwind 복사를 클릭하면 임의 값 클래스를, React Native 복사를 클릭하면 textShadowColor/textShadowOffset/textShadowRadius 코드를 얻을 수 있습니다. 링크 공유로 정확한 설정을 URL에 저장하세요. 모두 무료·회원가입 불필요·로컬 실행이며, 로드 후 오프라인에서도 사용 가능합니다.
Related tools
모든 도구 보기
신규 CSS 그라데이션 생성기
라이브 미리보기와 함께 선형, 방사형, 원뿔형 CSS 그라데이션 제작.
신규 CSS Box-Shadow 생성기
프리셋과 라이브 미리보기로 다중 레이어 CSS box-shadow 제작. CSS, 값 또는 React 스타일을 즉시 복사.
신규 색상 팔레트 생성기
보색, 유사색, 삼색, 단색 팔레트 생성.
신규 Cubic Bezier 생성기
조절점을 드래그해 CSS 이징 곡선을 디자인 — 라이브 미리보기.
신규 Border Radius 생성기
CSS 둥근 모서리와 유기적 블롭 모양을 시각적으로 제작.
신규 CSS Flexbox 플레이그라운드
라이브 미리보기와 함께 flex 속성을 조정하고 CSS 복사.