CSS 텍스트 섀도 생성기
무료 온라인 CSS text-shadow 생성기. 오프셋, 블러, 색상, 불투명도를 조절해 여러 섀도 레이어를 쌓고, 네온·3D·레트로 프리셋을 적용해 즉시 CSS를 복사하세요.
CSS text-shadow 속성이란 무엇인가요?
text-shadow는 텍스트 글리프에 그림자 효과를 추가하는 속성입니다. 각 그림자는 가로 오프셋, 세로 오프셋, 선택적 블러 반경, 색상으로 정의되며, 여러 그림자를 쉼표로 구분해 하나의 값에 결합해 풍부한 효과를 만들 수 있습니다.
여러 섀도 레이어는 어떻게 동작하나요?
레이어는 선언된 순서대로 아래에서 위로 그려지므로 목록의 첫 번째 그림자가 가장 위에 표시됩니다. 이 생성기는 레이어 추가·삭제·활성화·비활성화를 지원하며, 각 레이어마다 고유한 오프셋, 블러, 색상, 불투명도를 설정해 네온이나 3D 같은 효과를 쌓을 수 있습니다.
오프셋 X, Y와 블러는 무슨 의미인가요?
오프셋 X는 그림자를 글리프 기준 좌우로, 오프셋 Y는 위아래로 움직이고, 블러 반경은 가장자리를 부드럽게 합니다. 0이면 레트로나 아웃라인처럼 단단한 가장자리가 되고, 값이 커지면 글로우처럼 색이 퍼집니다.
네온 발광 효과는 어떻게 만드나요?
네온 프리셋을 사용하거나, 오프셋이 0인 여러 레이어에 같은 밝은 색을 지정하고 0 0 3px, 0 0 8px, 0 0 20px처럼 블러 값을 점진적으로 키우세요. 겹쳐진 후광이 네온관의 빛을 재현합니다.
text-shadow는 렌더링 성능에 영향을 주나요?
정적인 몇 개 레이어는 부담이 없지만, 큰 블러의 그림자가 많은 텍스트는 다시 그리는 비용이 커집니다. 긴 문단에 무거운 그림자를 적용하거나 text-shadow를 계속 애니메이션하면 저사양·모바일 기기에서 프레임이 떨어질 수 있으니, 짧은 제목과 적당한 블러를 쓰고 애니메이션은 불투명도로 대체하는 것이 좋습니다.
그림자를 반투명하게 만드는 방법은?
각 레이어에는 불투명도 슬라이더가 있어 선택한 색을 rgba 표기로 바꿉니다(예: rgba(0, 0, 0, 0.5)). 반투명 그림자는 어떤 배경과도 자연스럽게 어우러지며, 페이퍼 프리셋이 이를 활용해 부드러운 엠보싱 느낌을 만듭니다.
text-shadow와 box-shadow의 차이는 무엇인가요?
text-shadow는 텍스트 글리프 모양에 적용되며 확산(spread)이나 인셋(inset) 값이 없습니다. box-shadow는 요소의 사각형 박스를 감쌉니다. 오프셋과 블러 문법은 같지만 서로를 대체할 수는 없습니다.
text-shadow를 지원하는 브라우저는?
text-shadow는 Chrome, Firefox, Safari, Edge, Opera 등 모든 최신 브라우저에서 지원되며, 10년 넘게 접두사 없이 안정적입니다. 다중 레이어 그림자도 어디서든 동일하게 동작합니다.
입력한 내용이 서버로 전송되나요?
아니요. 미리보기 텍스트와 설정한 모든 레이어는 브라우저에 머무르고 CSS는 페이지에서 로컬로 생성됩니다. 네트워크로 전송되는 것은 없으며, 로드 후에는 오프라인에서도 사용할 수 있습니다.
CSS 텍스트 섀도 생성기 사용 방법
한 组의 오프셋을 맞히는 대신 레이어를 쌓아 CSS 텍스트 섀도를 디자인하세요. 모든 변경 사항은 큰 라이브 미리 보기 텍스트에 바로 반영되고, CSS는 브라우저에서 로컬로 생성됩니다.
- 「미리 보기 텍스트」 입력란에 직접 문구를 넣어 실제 문장으로 효과를 확인하세요.
- 프리셋을 활용해 보세요. 네온, 종이, 3D, 레트로, 글로우, 외곽선이 완성된 레이어를 불러옵니다.
- 각 레이어의 슬라이더로 오프셋 X, 오프셋 Y, 블러, 색상, 불투명도를 조절하세요.
- 「레이어 추가」로 섀도를 더 쌓고, 체크를 해제하면 일시적으로 끌 수 있으며, 휴지통 아이콘으로 삭제합니다.
- 생성된 text-shadow 규칙을 복사해 스타일시트에 붙여 넣으세요.
네온 글로우는 같은 색으로 세네 개나 네 개의 레이어를 쌓고 블러를 점점 키울 때 가장 멋집니다. 오프셋은 0으로 두고 빛내기는 블러에 맡기세요.
관련 도구
- CSS 박스 섀도 생성기 무료 온라인 CSS box-shadow 생성기. 조정 가능한 오프셋, 블러, 확산, 색상, 인셋으로 아름다운 그림자를 시각적으로 생성. 라이브 미리보기 및 즉시 코드 복사.
- CSS 그라데이션 생성기 시각적으로 놀라운 CSS 그라데이션을 만드세요. 여러 색상 정지점, 각도 및 위치로 선형, 방사형 및 원뿔형 그라데이션을 생성하세요. 프로덕션 준비 코드를 즉시 복사하세요.
- 꾸미기 글꼴 생성기 28가지 유니코드 스타일을 제공하는 무료 꾸미기 글꼴 생성기. 굵게, 기울임, 고딕, 동그라미 글자를 만들어 인스타그램 소개글, 틱톡, 게임 닉네임에 한 번에 복사하세요.
- 보더 레디우스 생성기 무료 온라인 border-radius 생성기. 핸들 8개를 드래그하거나 블롭 프리셋을 선택해 유기적인 CSS 셰이프를 만들고 코드를 바로 복사하세요.
- 색상 변환기 무료 온라인 색상 변환기. 비주얼 피커로 HEX, RGB, HSL, HSV 형식을 즉시 변환. 100% 비공개, 브라우저에서 실행.
- CSS 이징 생성기 무료 온라인 CSS 이징 생성기. 인터랙티브 곡선에서 cubic-bezier 제어점을 드래그하고, 18가지 프리셋 중 고르고, 반복되는 공 애니메이션으로 확인한 뒤 타이밍 함수를 즉시 복사하세요.
- CSS 클립패스 생성기 무료 온라인 CSS clip-path 생성기. polygon, circle, ellipse, inset 모양을 드래그 가능한 점으로 디자인하고, 실시간 미리보기와 클릭 한 번으로 CSS 코드를 복사하세요.
- CSS 뷰티파이어 CSS 코드를 즉시 포맷하고 정리합니다. 사용자 정의 옵션으로 압축된 CSS를 읽기 쉬운 코드로 변환합니다.