CSS Text Shadow 생성기 - 텍스트 효과 온라인 제작
시각적 컨트롤과 실시간 미리보기로 CSS 텍스트 그림자를 디자인하세요. 네온 글로우, 3D, 엠보스, 불꽃, 외곽선 텍스트 효과를 여러 그림자 레이어로 만들 수 있습니다.
자주 묻는 질문
CSS text-shadow란 무엇인가요?
CSS text-shadow는 텍스트 문자에 그림자 효과를 추가하는 속성입니다. 요소의 경계 상자에 적용되는 box-shadow와 달리, text-shadow는 개별 텍스트 글리프의 윤곽을 따릅니다. 수평 오프셋, 수직 오프셋, 선택적 블러 반경 및 색상을 허용합니다. 쉼표로 구분된 여러 그림자를 결합하여 네온 글로우, 3D 깊이, 외곽선, 불꽃 효과 등 창의적인 효과를 만들 수 있습니다.
이 텍스트 그림자 생성기를 어떻게 사용하나요?
슬라이더를 조정하여 수평 오프셋, 수직 오프셋, 블러 반경 및 불투명도를 설정합니다. 색상 선택기로 그림자 색상을 선택합니다. 미리보기 텍스트에서 실시간으로 효과를 확인할 수 있습니다. 네온 글로우나 3D 텍스트 같은 복잡한 효과를 위해 여러 레이어를 추가하세요. 미리보기 텍스트, 글꼴 크기, 두께, 배경색을 커스터마이즈할 수 있습니다. 생성된 CSS 코드를 스타일시트에 복사하세요.
text-shadow와 box-shadow의 차이점은 무엇인가요?
text-shadow는 각 문자의 모양을 따라 텍스트 콘텐츠에만 그림자를 적용합니다. box-shadow는 요소의 직사각형 경계 상자에 그림자를 적용합니다. 또한 text-shadow는 box-shadow가 제공하는 spread-radius나 inset 키워드를 지원하지 않습니다. 타이포그래피 효과에는 text-shadow를, 컨테이너/카드 엘리베이션에는 box-shadow를 사용하세요.
네온 글로우 텍스트 효과는 어떻게 만드나요?
네온 글로우는 블러 반경이 증가하는 여러 개의 오프셋 없는 그림자 레이어와 밝은 색상을 사용합니다. 예를 들어, #00ff00 같은 네온 색상으로 0 0 7px, 0 0 10px, 0 0 21px, 0 0 42px의 3-4개 그림자를 쌓습니다. 이 도구의 네온 글로우 프리셋은 한 번의 클릭으로 이 기법을 자동 적용합니다.
여러 개의 텍스트 그림자를 사용할 수 있나요?
네. CSS text-shadow 속성은 쉼표로 구분된 여러 그림자를 지원합니다. 이 도구는 각각 독립적인 컨트롤을 가진 최대 10개의 그림자 레이어를 추가할 수 있습니다. 그림자는 앞에서 뒤로 적용됩니다(첫 번째 그림자가 맨 위). 이를 통해 3D 텍스트, 외곽선 텍스트, 불꽃 효과 등을 만들 수 있습니다.
3D/레트로 텍스트 효과는 어떻게 만드나요?
3D 또는 레트로 텍스트 효과는 오프셋이 점진적으로 증가하고 블러가 없는 여러 그림자 레이어를 사용합니다. 각 레이어는 이전보다 1px 더 오프셋되며, 점진적으로 어두운 색상을 사용합니다. 이 도구의 레트로 3D 프리셋은 5개의 쌓인 레이어로 이를 자동으로 생성합니다.
내 디자인 데이터는 안전한가요?
네. 이 도구는 전적으로 브라우저에서 실행됩니다. 어떤 데이터도 서버로 전송되지 않습니다. 그림자 구성, 미리보기 텍스트 및 모든 커스터마이징은 기기에 머물러 완전한 프라이버시를 보장합니다.
코드 예제
// Generate text-shadow CSS from parameters
function generateTextShadow(layers) {
return layers.map(layer => {
const { r, g, b } = hexToRgb(layer.color);
const rgba = `rgba(${r}, ${g}, ${b}, ${layer.opacity})`;
return `${layer.offsetX}px ${layer.offsetY}px ${layer.blur}px ${rgba}`;
}).join(', ');
}
function hexToRgb(hex) {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : { r: 0, g: 0, b: 0 };
}
// Generate neon glow effect
function generateNeonGlow(color, layerCount = 4, maxBlur = 42) {
const shadows = [];
for (let i = 0; i < layerCount; i++) {
const progress = (i + 1) / layerCount;
const blur = Math.round(maxBlur * progress);
const opacity = (1 - progress * 0.6).toFixed(1);
const { r, g, b } = hexToRgb(color);
shadows.push(`0 0 ${blur}px rgba(${r}, ${g}, ${b}, ${opacity})`);
}
return shadows.join(', ');
}
// Usage
const shadow = generateTextShadow([
{ offsetX: 2, offsetY: 2, blur: 4, color: '#000000', opacity: 0.5 }
]);
console.log(`text-shadow: ${shadow};`);
// Output: text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);