CSS 텍스트 글리치 생성기

이 도구는 무엇인가요?

CSS 글리치 효과는 손상된 방송 신호나 낡은 VHS 테이프처럼 보이도록 흉내내는 기법입니다. ::before와 ::after 가상 요소로 텍스트를 두 번 복제하고, 색이 있는 text-shadow(전형적으로 아날로그 RGB 신호 오류를 연상시키는 빨강과 시안)로 각 복사본을 살짝 어긋나게 배치한 뒤, @keyframes로 각 복사본의 clip-path를 애니메이션시켜 서로 다른 가로 조각이 시간에 따라 번갈아 나타나게 만듭니다.

이 기법에는 이미지도, 자바스크립트 애니메이션 루프도, 캔버스도 필요 없습니다. 하나의 HTML 요소가 텍스트를 두 번 담고 있으면 됩니다. 한 번은 실제 텍스트 콘텐츠로, 또 한 번은 가상 요소가 content: attr(data-text)로 읽어오는 data-text 속성으로요.

출처: CSS Pseudo-Elements Module Level 4, W3C — 이 효과의 기반이 되는 ::before/::after 가상 요소와 attr() 함수를 정의합니다.

왜 사용해야 할까요?

• 실시간 애니메이션 미리보기 — 정적인 목업이 아니라 입력하고 설정을 바꾸는 동안 실제 글리치 효과를 바로 확인할 수 있습니다.
• 독립적으로 조절 가능한 강조 색상 두 가지 — 기본값은 클래식한 빨강/시안 RGB 분리 룩이지만 어떤 브랜드나 테마에도 맞게 바꿀 수 있습니다.
• 강도 슬라이더는 색상 그림자 오프셋을 픽셀 단위로, 속도 슬라이더는 clip-path 키프레임이 순환하는 빠르기를 조절합니다.
• 효과가 보이는 텍스트와 일치하는 data-text 속성에 의존하기 때문에, CSS(전체 @keyframes 블록 포함)와 정확한 HTML 구조를 함께 복사합니다.
• 순수 CSS — 페이지에 적용된 뒤에는 런타임에 자바스크립트가 전혀 필요 없고, 외부 라이브러리나 이미지 로딩도 없습니다.
• 무료, 가입 불필요, 브라우저에서 100% 실행됩니다.

사용 방법

1. 글리치 효과를 줄 텍스트를 입력창에 입력하세요. 실시간 미리보기가 즉시 업데이트됩니다.
2. 강조 색상 두 가지를 고르세요. 복고풍 RGB 분리 느낌을 내는 클래식한 기본값은 빨강과 시안이지만, 대비가 뚜렷한 어떤 두 색상이든 잘 어울립니다.
3. 강도 슬라이더로 두 색상 레이어가 얼마나 떨어져 있는지 조절하세요. 값이 클수록 더 격렬한 글리치처럼 보입니다.
4. 속도 슬라이더로 글리치가 깜빡이는 빠르기를 조절하세요.
5. CSS 블록을 복사해 스타일시트에 붙여넣으세요.
6. HTML 스니펫을 복사해 그대로 사용하세요. 효과가 제대로 동작하려면 data-text 속성이 요소에 보이는 텍스트와 정확히 일치해야 합니다.

예시

입력

텍스트: "GLITCH" · 색상 1: #ff0040(빨강) · 색상 2: #00fff9(시안) · 강도: 5px

결과

<div class="glitch" data-text="GLITCH">GLITCH</div>
.glitch::before { text-shadow: 5px 0 #ff0040; ... }
.glitch::after { text-shadow: -5px 0 #00fff9; ... }

기본 텍스트는 흰색으로 유지되고, 두 개의 가상 요소 복사본이 양쪽에서 빨강과 시안으로 깜빡이면서 전형적인 신호 손상 룩을 만들어냅니다.

요소에 data-text 속성이 필요한 이유

::before와 ::after 가상 요소는 요소의 일반 텍스트 콘텐츠를 직접 읽을 수 없습니다. CSS의 content: attr()은 실제 HTML 속성에만 동작하고 자식 텍스트 노드에는 작동하지 않기 때문입니다. 그래서 생성된 HTML은 같은 요소에 data-text="..." 속성으로 텍스트를 한 번 더 반복해서 담습니다. 보이는 텍스트는 정상적으로 렌더링되고, 각 가상 요소는 content: attr(data-text)로 독립적으로 같은 문자열을 가져와 그 위에 색상이 바뀌는 애니메이션 복사본을 겹쳐 그립니다.

깜빡임은 어떻게 만들어지나요

각 가상 요소는 clip-path: inset(...) 값을 여러 단계로 거치는 자체 @keyframes 블록으로 애니메이션됩니다. 각 키프레임마다 색이 있는 복사본의 서로 다른 가로 띠가 드러나고 나머지는 잘려나가기 때문에, 애니메이션이 재생되는 동안 보이는 빨강(또는 시안) 조각이 위아래로 튀는 것처럼 보입니다. 여기에 색상 그림자의 오프셋이 더해지면서 부드러운 발광이 아니라 어긋나고 찢어진 색 채널처럼 읽히게 됩니다.

이 효과가 잘 어울리는 곳

• 게임, 사이버펑크, 스트리밍, 음악 브랜드 랜딩 페이지의 히어로 제목.
• 404 / 오류 페이지 — 글리치가 '뭔가 고장났다'는 테마를 강조해줍니다.
• 제목이나 로고의 hover, focus 상태에서 잠깐 눈길을 끄는 포인트로.
• 로딩이나 '처리 중' 상태에서 시스템 활동을 표현할 때.
• 본문 텍스트에는 아껴서 사용하세요. 이 효과는 의도적으로 한눈에 읽기 어렵게 만들어져 있어서, 문단보다는 짧은 제목이나 로고 타입에 훨씬 잘 어울립니다.

다른 CSS 도구와 함께 사용하기

글리치 제목은 대개 어둡고 대비가 강한 큰 레이아웃 안의 요소 하나에 불과합니다. 아래 다른 CSS 도구들의 은은한 그림자나 둥근 카드 모서리와 조합하면 더 완성도 높은 느낌을 낼 수 있습니다.

→ 박스 섀도우 생성기 · Border Radius 생성기

자주 묻는 질문