CSS 텍스트 글리치 생성기 - 글리치 텍스트 효과 만들기 온라인
라이브 미리보기로 순수 CSS 글리치 텍스트 애니메이션을 생성하세요. 색상 분리, 노이즈, 변형 효과를 강도 조절과 함께 커스터마이즈 — 100% 클라이언트 사이드, 서버로 데이터 전송 없음.
자주 묻는 질문
CSS 텍스트 글리치 효과란 무엇인가요?
CSS 텍스트 글리치 효과는 텍스트가 오작동하거나 글리치되는 것처럼 보이게 하는 순수 시각적 애니메이션입니다. 디지털 신호 손상이나 VHS 테이프 아티팩트를 모방합니다. clip-path 슬라이싱, ::before/::after 의사 요소를 사용한 색상 채널 분리, transform: skew() 왜곡 등의 CSS 기술을 @keyframes 애니메이션으로 구현합니다. 생성된 출력에 JavaScript가 필요하지 않습니다.
이 CSS 텍스트 글리치 생성기는 어떻게 사용하나요?
글리치 효과를 적용할 텍스트를 입력하세요. 글리치 효과 유형(색상 분리, 노이즈, 변형, 복합)을 선택하세요. 슬라이더로 글리치 강도와 애니메이션 속도를 조절하세요. 텍스트 색상, 배경 색상, 두 가지 글리치 색상을 커스터마이즈하세요. 미리보기 영역에서 실시간으로 효과를 확인하세요. 생성된 HTML과 CSS 코드를 프로젝트에 복사하세요. 또는 프리셋 탭에서 미리 구성된 효과를 한 번의 클릭으로 적용할 수 있습니다.
이 도구를 사용할 때 데이터가 안전한가요?
네. 이 도구는 클라이언트 사이드 JavaScript를 사용하여 브라우저에서 완전히 실행됩니다. 텍스트 내용, 색상 값 또는 생성된 CSS 코드가 서버로 전송되지 않습니다. 모든 처리가 기기에서 로컬로 이루어져 완전한 프라이버시를 보장합니다.
clip-path 글리치 기술은 어떻게 작동하나요?
clip-path 노이즈 기술은 텍스트의 어떤 수평 슬라이스가 보이는지 빠르게 변경하여 디지털 손상 느낌을 만듭니다. @keyframes를 사용하여 clip-path: inset() 값을 여러 랜덤 위치로 애니메이션하여, 텍스트의 다른 수평 밴드가 나타나고 사라지게 하여 데이터 손상을 시뮬레이션합니다. 강도 컨트롤은 이러한 클립 영역의 너비를 조절합니다.
사이버펑크/네온 글리치 효과는 어떻게 만드나요?
어두운 배경에서 색상 분리(RGB) 효과 유형을 선택하고 시안(#00ffff)과 마젠타(#ff00ff)를 두 글리치 색상으로 사용하세요. 강도를 5-7로 설정하면 눈에 잘 보이지만 과하지 않은 분리 효과를 얻을 수 있습니다. 프리셋 탭의 '사이버펑크 네온' 프리셋이 한 번의 클릭으로 자동 적용됩니다.
글리치 효과를 접근성 있게 만들 수 있나요?
네. 생성된 CSS 애니메이션을 @media (prefers-reduced-motion: reduce) 블록으로 감싸서 줄어든 모션을 선호하는 사용자에게 비활성화할 수 있습니다. 또한 스크린 리더를 위해 애니메이션 없이도 텍스트가 읽을 수 있도록 해야 합니다.
색상 분리, 노이즈, 변형 효과의 차이점은 무엇인가요?
색상 분리(RGB)는 색상 의사 요소 복사본을 수평으로 오프셋하여 색수차를 만들어 RGB 채널 분리를 시뮬레이션합니다. 노이즈(Clip-path)는 애니메이션된 clip-path: inset()을 사용하여 다른 수평 밴드를 무작위로 슬라이스하고 보여주어 데이터 손상 느낌을 만듭니다. 변형(Skew)은 애니메이션된 transform: skew()와 translate()를 적용하여 흔들리는 왜곡 효과를 만듭니다. 복합은 세 가지 기술을 모두 합쳐 최대 시각적 임팩트를 줍니다.
코드 예제
// Generate CSS glitch effect - Color Split technique
function generateColorSplitGlitch(config) {
const { text, fontSize, textColor, bgColor, color1, color2, duration } = config;
const html = `<div class="glitch-wrapper">
<div class="glitch" data-text="${text}">${text}</div>
</div>`;
const css = `.glitch-wrapper {
display: flex;
align-items: center;
justify-content: center;
background: ${bgColor};
padding: 2rem;
}
.glitch {
position: relative;
font-size: ${fontSize}px;
font-weight: 700;
color: ${textColor};
letter-spacing: 0.05em;
}
.glitch::before,
.glitch::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.glitch::before {
color: ${color1};
animation: glitch-before ${duration}s infinite linear alternate-reverse;
clip-path: inset(0 0 0 0);
}
.glitch::after {
color: ${color2};
animation: glitch-after ${duration}s infinite linear alternate-reverse;
clip-path: inset(0 0 0 0);
}
@keyframes glitch-before {
0% { clip-path: inset(40% 0 61% 0); transform: translate(-2px, -1px); }
20% { clip-path: inset(92% 0 1% 0); transform: translate(1px, 2px); }
40% { clip-path: inset(43% 0 1% 0); transform: translate(-1px, 3px); }
60% { clip-path: inset(25% 0 58% 0); transform: translate(3px, 1px); }
80% { clip-path: inset(54% 0 7% 0); transform: translate(-3px, -2px); }
100% { clip-path: inset(58% 0 43% 0); transform: translate(2px, -3px); }
}
@keyframes glitch-after {
0% { clip-path: inset(65% 0 13% 0); transform: translate(2px, 1px); }
20% { clip-path: inset(79% 0 2% 0); transform: translate(-2px, -1px); }
40% { clip-path: inset(48% 0 38% 0); transform: translate(1px, -2px); }
60% { clip-path: inset(3% 0 83% 0); transform: translate(-1px, 3px); }
80% { clip-path: inset(22% 0 64% 0); transform: translate(3px, 2px); }
100% { clip-path: inset(10% 0 74% 0); transform: translate(-2px, 1px); }
}`;
return { html, css };
}
// Generate noise/clip-path keyframes with controllable intensity
function generateNoiseKeyframes(name, intensity, steps = 20) {
let keyframes = `@keyframes ${name} {\n`;
for (let i = 0; i <= steps; i++) {
const percent = Math.round((i / steps) * 100);
const maxClip = intensity * 10;
const top = Math.floor(Math.random() * maxClip);
const bottom = Math.floor(Math.random() * maxClip);
keyframes += ` ${percent}% { clip-path: inset(${top}% 0 ${bottom}% 0); }\n`;
}
keyframes += '}';
return keyframes;
}
// Usage
const result = generateColorSplitGlitch({
text: 'GLITCH',
fontSize: 80,
textColor: '#ffffff',
bgColor: '#0a0a0a',
color1: '#00ffff',
color2: '#ff00ff',
duration: 2,
});
console.log(result.html);
console.log(result.css);