MakerBox

CSS 글리치 텍스트 생성기 (RGB 분리 애니메이션 효과)

RGB 분리 글리치 텍스트 효과를 순수 CSS로 생성 — 색 분리·노이즈·변형·전부 한 번에 중 선택, 실시간 미리보기, 색상·배경 선택기, 강도·속도·크기 슬라이더. 100% 브라우저 처리, 업로드 없음

실시간 미리보기
글리치
HTML · CSS
<div class="glitch-wrapper">
  <span class="glitch" data-text="글리치">글리치</span>
</div>

<style>
.glitch-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  padding: 2rem;
  background-color: #0b0b12;
}

.glitch {
  position: relative;
  display: inline-block;
  color: #ffffff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 64px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.06em;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.glitch::before {
  text-shadow: -3px 0 #ff00c1;
  animation: glitch-anim-1 2s infinite linear alternate-reverse;
}

.glitch::after {
  text-shadow: 3px 0 #00fff9;
  animation: glitch-anim-2 3s infinite linear alternate-reverse;
}

@keyframes glitch-anim-1 {
  0% { clip-path: inset(8% 0 78% 0); transform: translate(-3px, 0); }
  16% { clip-path: inset(45% 0 40% 0); transform: translate(3px, 0); }
  32% { clip-path: inset(68% 0 15% 0); transform: translate(-1.8px, 0); }
  48% { clip-path: inset(22% 0 60% 0); transform: translate(2.4px, 0); }
  64% { clip-path: inset(82% 0 6% 0); transform: translate(-3px, 0); }
  80% { clip-path: inset(35% 0 52% 0); transform: translate(1.2px, 0); }
  100% { clip-path: inset(60% 0 28% 0); transform: translate(3px, 0); }
}

@keyframes glitch-anim-2 {
  0% { clip-path: inset(70% 0 12% 0); transform: translate(3px, 0); }
  18% { clip-path: inset(30% 0 55% 0); transform: translate(-3px, 0); }
  34% { clip-path: inset(55% 0 30% 0); transform: translate(1.5px, 0); }
  52% { clip-path: inset(12% 0 74% 0); transform: translate(-2.1px, 0); }
  66% { clip-path: inset(48% 0 40% 0); transform: translate(3px, 0); }
  84% { clip-path: inset(78% 0 8% 0); transform: translate(-1.2px, 0); }
  100% { clip-path: inset(25% 0 62% 0); transform: translate(-3px, 0); }
}
</style>

🔒 미리보기와 코드는 브라우저에서 처리되며 업로드되지 않습니다.

글리치 텍스트 생성기란

이 도구는 클래식한 RGB 분리 글리치 효과를 위한 완전한 복사-붙여넣기용 CSS 블록을 만듭니다. 텍스트가 두 개의 색상 레이어로 복제되고 좌우로 흔들리면서 글자가 두 색상 잔상으로 찢어지는 것처럼 보입니다. 효과는 네 가지 중에서 고릅니다 — 색 분리와 노이즈는 두 레이어를 clip-path 키프레임으로 가로 띠처럼 잘라 내고, 변형은 자르지 않고 레이어를 흘리면서 글자 전체를 기울이며, 전부 한 번에는 띠와 기울임을 함께 씁니다. 자바스크립트나 이미지 없이 두 개의 의사 요소와 @keyframes만 사용하는 순수 CSS입니다. 텍스트를 입력하고 기본 색상과 두 글리치 색상, 배경색을 고른 뒤 강도·속도·글자 크기 슬라이더를 조절하면 실시간 미리보기가 즉시 갱신됩니다.

생성된 CSS 사용법

스니펫은 헤더 주석에 표시된 마크업 <span class="glitch" data-text="HELLO">HELLO</span>을 대상으로 합니다. 두 의사 요소가 data-text 속성에서 사본을 읽으므로 CSS를 수정하지 않아도 어떤 문자열에나 같은 규칙이 적용됩니다. 강도는 색상 레이어가 벌어지는 정도를, 속도는 애니메이션 지속 시간을 조절합니다. CSS를 복사하거나 파일로 내려받아 스타일시트에 붙여넣으세요.

자주 묻는 질문

CSS를 붙여넣었는데 글리치 효과가 보이지 않아요.

이 효과에는 보이는 텍스트와 일치하는 data-text 속성이 필요합니다. 요소에 glitch 클래스와 같은 문자열을 담은 data-text 속성이 모두 있는지 확인하세요. 의사 요소가 그 속성에서 색상 사본을 가져오므로 속성이 없으면 분리할 대상이 없습니다.

애니메이션에 자바스크립트가 필요한가요?

아니요. 글리치 효과는 CSS 의사 요소와 키프레임 애니메이션만으로 만들어져 스크립트 없이 동작합니다. 색 분리·노이즈·전부 한 번에는 clip-path로 띠를 자르고, 변형은 transform만 씁니다. 코드도 브라우저에서 생성되며 업로드되는 것은 없습니다.