KOEN

글리치 텍스트 생성기

GLITCH · TEXT · CSS

RGB 분리·슬라이스·노이즈로 깨지는 글리치 글자를 만들고 ::before/::after 키프레임 CSS와 정지 프레임 PNG로 저장해요.

GLITCH
프레임을 고르면 멈춘 화면 그대로 PNG로 저장돼요. 

      

    


    
  










  

    

      HOW TO
      
사용 방법

      
    
      
  1. 텍스트를 입력하고 스타일 프리셋(클래식 RGB·VHS 노이즈·사이버펑크·미니멀 잔상) 중 하나로 시작해요.
    2. 
      
  2. RGB 분리·슬라이스·노이즈(흔들림)·글리치 빈도·한 바퀴 시간과 글자·배경·채널 A·B 색, 겹침 방식을 조절하고, 패턴이 마음에 안 들면 '다시 섞기'를 눌러요.
    3. 
      
  3. 아래 프레임 슬라이더로 16프레임 중 원하는 순간을 골라 멈춘 뒤, 배율(1x~3x)과 배경 투명 여부를 정해 'PNG 저장'을 눌러요.
    4. 
      
  4. CSS·HTML 탭에서 코드를 복사하거나 위의 'CSS·HTML 복사'로 한 번에 가져가 붙여넣어요.
    5. 
      

    

    

      PAIRS WELL WITH
      
같이 쓰기 좋은 도구

      
    

  

  
  

    FAQ
    
자주 묻는 질문

    
CSS 글리치 효과는 어떤 원리로 동작해요?
data-text 속성의 같은 글자를 ::before와 ::after로 두 번 더 그려 채널 A·B 색으로 좌우로 어긋나게 두고, clip-path: inset()으로 가로 띠만 잘라 보이게 하는 @keyframes를 steps(1)로 끊어 재생해요. 그래서 HTML의 data-text에도 본문과 같은 글자를 꼭 넣어야 해요.

    
밝은 배경에서도 글리치 효과를 쓸 수 있나요?
겹침 방식이 '자동'이면 배경이 어두울 때 mix-blend-mode: screen, 밝을 때 multiply로 정해서 색이 겹치는 부분이 자연스럽게 섞여요. '미니멀 잔상' 프리셋이 밝은 배경 예시예요.

    
움직임 줄이기를 켠 사용자에게도 계속 깜빡이나요?
아니요. 복사되는 CSS에 prefers-reduced-motion: reduce일 때 애니메이션을 끄는 규칙이 들어 있어서, 그 사용자에게는 RGB 분리만 남은 정지 화면으로 보여요. 이 도구도 그 설정이면 미리보기가 멈춘 상태로 열려요.

    
움직이는 GIF로도 저장되나요?
PNG 저장은 고른 프레임 한 장을 정지 이미지로 만들어요. GIF·영상 저장은 지원하지 않아요. 텍스트는 한 줄(최대 40자)이고, 글꼴은 Google Fonts에서 불러오기 때문에 불러오지 못하면 대체 글꼴로 그려질 수 있어요.