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;
사용법
- 프리뷰 텍스트 입력, 폰트 크기·굵기·텍스트 색·배경 선택.
- 프리셋 선택으로 시작 → 레이어 칩 클릭, x/y/블러 슬라이더 드래그 또는 색상 문자열 변경.
- + 추가로 레이어 추가, 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 페인트 경고 주시.
관련 도구
CSS Box Shadow 생성기
여러 레이어로 CSS box-shadow를 디자인 — 실시간 미리보기 + CSS·Tailwind 출력.
색상 0 0
PDF 텍스트 추출
PDF에서 글자만 뽑아 복사하거나 .txt로 저장하세요. 문서 전체 또는 지정한 페이지만 가능하며, 업로드하지 않습니다.
파일 0 0
찾기·바꾸기
텍스트 블록 검색·치환. 선택적 정규식 + global·대소문자·multiline·dotAll 플래그. 실시간 매치 수.
텍스트 0 0
CSS 그라디언트 생성기
선형·방사형 CSS 그라디언트를 다중 색상 스톱으로 디자인하고 코드를 복사하세요.
색상 0 0
CSS 필터 플레이그라운드
blur·brightness·contrast·hue·sepia·invert 등 9개 필터 시각 조합 — CSS 또는 Tailwind 임의값으로 복사.
색상 0 0
Border Radius 생성기
코너 독립 드래그, 타원 반지름, CSS 복사 — 채팅 버블·필·블랍·탭 프리셋 포함.
색상 0 0