본문으로 건너뛰기
Toolars
둘러보기
버그 신고

디자인 · 로컬 유틸리티

CSS 글리치 텍스트 생성기

CSS Text Glitch Effect Generator

짧은 텍스트에 세 겹 색수차 글리치를 오프셋과 속도 제어로 입히고 reduced-motion 대체 동작이 든 CSS를 복사합니다.

작업 경로 / 입력에서 결과까지

미리보기 텍스트 입력하기

로컬에서 실행 · 업로드 없음

CSS 글리치 텍스트 생성기 사용법, 개인정보 보호 및 관련 도구

작업 경로 / 입력에서 결과까지

CSS 텍스트 글리치 효과를 만드는 방법

  1. 01

    미리보기 텍스트 입력하기

    미리보기 텍스트에 1~32자를 입력하세요. 라벨 옆의 카운터가 글자 수를 따라가요. 레이어가 갈라지기 시작하면 짧고 넓은 단어가 가장 읽기 좋아요.

  2. 02

    세 가지 색상 설정하기

    텍스트 색상이 기본 레이어를 그리고, 시안 채널과 레드 채널이 색수차 프린지를 만드는 오프셋 복제본이 됩니다. 순수한 시안과 빨강에 가까운 채널은 클래식한 색수차 느낌을, 탁한 채널은 더 은은하고 현대적인 갈라짐을 만들어요.

  3. 03

    글리치 움직임 조정하기

    레이어 오프셋(1~12px)이 복제본의 어긋남량, 사이클 지속 시간(0.2~3초)이 루프 속도입니다. 미리보기는 세 레이어를 모두 실시간으로 보여 줍니다.

  4. 04

    세 레이어 이해하기

    기본 요소는 텍스트 색상을 유지하고, 시안 복제본은 줄의 위쪽으로, 빨간 복제본은 아래쪽으로 클립됩니다. 각 복제본은 steps(2, end) 애니메이션으로 움직여요. 부드러운 슬라이드가 아닌 딱딱한 점프라서, 글리치가 신호 간섭처럼 느껴져요.

  5. 05

    글리치 CSS 복사하기

    CSS 복사 또는 .css 다운로드로 toolars-text-glitch.css를 저장하세요. 볼내기에는 prefers-reduced-motion 블록이 포함돼 움직임에 민감한 방문자에게는 정적 프린지가 남아요. 출력 패널에 실시간 바이트 수가 표시되고, 텍스트가 검증을 통과하지 못하는 동안에는 두 액션이 모두 비활성화됩니다.

  6. 06

    data-text 속성 추가하기

    복제본은 attr(data-text)로 내용을 읽으므로, 요소에는 보이는 텍스트와 동일한 data-text 속성이 필요합니다. 나중에 문구가 바뀌면 둘 다 갱신하세요. 시안과 레드 레이어가 실제로 그리는 것은 이 속성입니다. 속성은 클래스와 같은 요소에 있어서 효과 전체가 하나의 태그로 유지됩니다.

도구 요약

처리
브라우저에서 완결
입력의 기기 외 전송
없음
저장
아무것도 저장하지 않음
가격
무료

입력 값은 브라우저에 머물러요.

CSS 글리치 텍스트 생성기 도구는 검증된 로컬 실행 경로를 사용하고, 숨겨진 입력 또는 출력 기록을 만들지 않습니다.

로컬 실행

현재 브라우저 탭 안에서 실행됩니다.

숨겨진 처리 없음

사용 중인 도구 데이터는 Toolars 문서 기록으로 남지 않습니다.

계정 불필요

프로필을 만들지 않고도 핵심 워크플로를 사용할 수 있습니다. 즐겨찾기는 로그인 후 계정에 동기화됩니다.

즉시 초기화

탭을 정리하면 사용 중이던 작업 데이터도 사라져요.

CSS 글리치 텍스트 생성기 도구가 실제로 하는 일

스트리밍 오버레이에는 지직거리는 타이틀을, 404 페이지에는 적당한 불온함을, 컨퍼런스 스플래시 화면에는 레트로 터미널 감성을 원합니다. 글리치 타이포는 과하기 쉬우니 오프셋과 지속 시간에 한계가 있는 게 의미가 있습니다. 효과의 합성은 이 탭 안에서 이뤄지므로, 아직 공개되지 않은 워드마크를 이리저리 시험하는 동안에도 그것이 기기 밖으로 나가지 않습니다. 큰 크기의 짧은 단어가 효과를 가장 잘 담아내니, 플레이스홀더 말고 실제 헤드라인으로 테스트하세요. 볼낸 @keyframes는 정한 오프셋과 리듬을 그대로 유지합니다.

자주 묻는 질문

이 효과에 필요한 마크업은 무엇인가요?
.glitch 클래스를 가진 요소에 텍스트 내용과 동일한 data-text 속성을 지정하세요. ::before와 ::after 복제본은 이 속성에서 그려지고, 각각 줄의 위쪽 절반과 아래쪽 절반으로 클립됩니다.
텍스트 제한은 어떻게 되나요?
미리보기 텍스트는 1~32자를 받고 필드 옆에 실시간 카운터가 있습니다. 빈 텍스트나 한도 초과는 검증에 실패하고, 수정될 때까지 값 확인 상태가 표시됩니다.
reduced-motion을 선택한 사용자에게는 어떻게 보이나요?
출력에는 prefers-reduced-motion 블록이 포함돼 두 애니메이션을 멈추고 복제본의 불투명도를 45%로 낮춰요. 움직이는 글리치 대신 정적인 색수차 프린지가 남아요. 기본 텍스트는 어느 경우든 그대로라서, 메시지는 두 모드 모두에서 읽을 수 있습니다.
애니메이션이 미끄러지지 않고 튀는 이유는 무엇인가요?
두 복제본 애니메이션 모두 steps(2, end)를 사용해, 부드럽게 보간하는 대신 이산적인 위치 사이로 transform을 스냅합니다. 이 딱딱한 스텝이 신호 간섭 미학의 상징입니다. 레이어 오프셋이 각 점프가 이동하는 거리를 정합니다.
오프셋과 지속 시간은 어떤 값이 좋나요?
1~3px 오프셋에 1초 안팎의 사이클은 은은한 잡음으로 읽히고 가독성을 지켜야 할 헤딩에 어울려요. 8~12px로 올리고 더 빠른 사이클로 하는 것은 짧은 장식용 단어에만 쓰세요. 기본값 4px, 0.85초는 그 사이의 안전한 지점에 있습니다.
입력한 텍스트가 어딘가로 전송되나요?
아니요. 효과는 현재 브라우저 탭 안에서 로컬로 렌더링되고 계정도 필요 없습니다. 텍스트가 저장소, 로그, 네트워크에 들어가지 않습니다. 초기화를 누륵면 기본 샘플로 돌아가요.

디자인 카테고리에서 계속하기

막다른 길이 아니라 이어지는 작업입니다.

전체 인덱스로 돌아가지 않고 다른 집중 워크스페이스로 바로 이동합니다.

CSS 로더 생성기

CSS Loader Generator

궤도 링이나 점 세 개 로딩 스피너를 크기, 굵기, 속도, 색상 제어로 디자인하고 reduced-motion을 존중하는 CSS를 복사합니다.

생성

CSS 체크박스 생성기

CSS Checkbox Generator

크기, 테두리, 상태 색상으로 커스텀 체크박스를 꾸미고, 키보드 접근이 가능한 실제 input을 유지하는 CSS를 복사합니다.

생성

CSS 스위치 생성기

CSS Switch Generator

트랙, 썸, 두 상태 색상을 갖춘 순수 CSS 토글 스위치를 만들고 포커스와 reduced-motion 처리를 포함한 코드를 복사합니다.

생성

CSS clip-path 생성기

CSS Clip Path Generator

드래그, 키보드 또는 좌표로 다각형을 편집하세요. 네 가지 프리셋에서 시작해 clip-path 선언이나 전체 CSS를 로컬에서 복사합니다.

생성