AZ Tools

CSS 텍스트 그림자 생성기 (멀티 레이어)

색상

CSS text-shadow는 쉼표로 구분된 그림자 목록을 받습니다. 네온·3D 텍스트·아웃라인·롱섀도 효과의 비결은 서로 다른 오프셋·블러·색의 2-20 레이어를 쌓는 것. 이 도구는 그 스택을 시각적으로 구성 — 레이어별 x/y/블러/색 슬라이더, 임의 배경에 라이브 프리뷰, 6개 프리셋(subtle·glow·neon·3D·outline·long-shadow)에서 시작해 수정. 출력은 순수 text-shadow CSS — 어떤 스타일시트에도 붙여넣기.

—
프리셋
Hello
레이어 (1)
CSS
text-shadow: 0px 0px 12px rgba(56,189,248,0.85);
font-size: 72px;
font-weight: 700;
color: #ffffff;

사용법

  1. 프리뷰 텍스트 입력, 폰트 크기·굵기·텍스트 색·배경 선택.
  2. 프리셋 선택으로 시작 → 레이어 칩 클릭, x/y/블러 슬라이더 드래그 또는 색상 문자열 변경.
  3. + 추가로 레이어 추가, CSS 복사 후 스타일시트에 붙여넣기.

자주 묻는 질문

아웃라인 프리셋의 원리는?
네 대각선 모서리(±1px, ±1px)에 블러 0 그림자 4개를 쌓습니다. CSS에서 아웃라인을 흉내내는 가장 저렴한 방법 — `text-stroke`가 진짜 해결책이지만 WebKit 외에서는 지원이 들쭉날쭉.
네온 프리셋이 왜 4 레이어?
설득력 있는 네온 글로우는 최소 3 레이어 필요 — 선명한 내부 흰 코어, 강조 색 중간 블러, 더 넓은 부드러운 헤일로. 4번째는 헤일로를 더 확장. 적으면 평평해 보이고, 5개 초과는 페인트 비용만 늘림.
rgba 색상 지원?
네 — 모든 CSS 색상 값 사용 가능: hex(#fff), rgb(), rgba(), hsl(), hsla(), oklch(), 명명 색상. 부드러운 그림자는 보통 alpha < 1 이어야 '글로우'로 읽히지 '얼룩'으로 안 보임.
깊은 레이어 스택이 성능에 영향?
각 레이어가 별도 합성 연산 — 큰 헤드라인에서 20+ 블러 그림자는 페인트당 몇 ms 추가. 본문은 괜찮지만 거대한 히어로 텍스트는 DevTools 페인트 경고 주시.

관련 도구

색맹 시뮬레이터

8가지 색각 이상(CVD)에 따라 이미지가 어떻게 보이는지 시뮬레이션.

색상00

CSS Box Shadow 생성기

여러 레이어로 CSS box-shadow를 디자인 — 실시간 미리보기 + CSS·Tailwind 출력.

색상00

컬러 포맷 변환기

어떤 색이든 HEX·RGB·HSL·HSV·OKLCH·CSS 변수로 한 번에 변환.

색상00

CSS 그라디언트 생성기

선형·방사형 CSS 그라디언트를 다중 색상 스톱으로 디자인하고 코드를 복사하세요.

색상00

컬러 팔레트 생성기

기준 색에서 여섯 가지 배색으로 조화로운 팔레트를 만드세요.

색상00

색상 대비 검사기

글자/배경 대비를 WCAG AA·AAA 기준으로 검사하세요.

색상00