CSS 텍스트 효과 생성기

대부분의 CSS 텍스트 효과 갤러리는 네온 광선 하나, 3D 입체 하나 등 고정된 프리셋만 제공합니다. 이 생성기는 사용자가 직접 입력한 텍스트에 매개변수를 기반으로 CSS를 구축합니다. 효과 선택에서 네온 광선, 3D 입체, 레터프레스/엠보스, 윤곽선, 그라데이션 채우기 중에 고르고 해당 효과의 컨트롤을 조절하면, 변경할 때마다 실시간 미리보기와 그 아래의 복사 가능한 CSS 블록이 업데이트됩니다.

3D 입체 효과는 이해할 가치가 있습니다. 선택한 깊이(누적된 레이어 수)와 각도에 대해, 레이어 i의 오프셋은 수평으로 i × cos(각도), 수직으로 i × sin(각도)로 계산되며, 이는 미리 정의된 각도 표가 아닌 실제 삼각 함수로 JavaScript에서 계산됩니다. 45도에서는 코사인과 사인이 같기 때문에 모든 레이어의 수평 및 수직 오프셋이 동일하게 나타납니다. 각도 슬라이더를 돌려보면 `text-shadow` 레이어 전체가 실시간으로 글자 주위를 회전하는 모습을 볼 수 있으며, 각 레이어는 조금씩 어두워져 실제로 조명받은 3D 면을 흉내 냅니다.

네온 광선은 선택한 색상으로 점점 커지는 블러 반경의 `text-shadow` 레이어 4개를 쌓고, 선택 시 깜빡임을 추가할 수 있습니다. 깜빡임을 켜면 무작위 불투명도 변화 시퀀스가 포함된 `@keyframes` 규칙이 생성되어 실시간으로 애니메이션되며, 버튼 하나로 패턴을 다시 섞을 수 있어 직접 키프레임을 작성할 필요가 없습니다. 윤곽선 텍스트는 지원 브라우저용 `-webkit-text-stroke`와 그렇지 않은 브라우저를 위한 정직한 8방향 `text-shadow` 대체 코드를 함께 적용하며, 복사된 CSS에 두 줄 모두와 그 이유에 대한 노트를 포함합니다. 그라데이션 채우기는 `linear-gradient`를 `background-clip: text`로 텍스트 모양에 클리핑하는데, 이는 이제 널리 지원되는 표준 속성이며, 레거시 엔진용으로 이전 `-webkit-` 접두사 줄을 유지합니다.

모든 렌더링은 브라우저에서 로컬로 처리됩니다. 입력한 텍스트는 어디에도 전송되지 않습니다. 효과에 필요한 경우 `@keyframes` 규칙을 포함한 완성된 CSS 블록을 그대로 복사하여 스타일시트에 붙여넣으세요.