CSS 글리치 텍스트 생성기
텍스트를 입력하면 CSS 글리치 애니메이션 코드를 자동 생성
도구를 불러오는 중…
🔒 이 도구는 100% 브라우저에서 처리됩니다. 업로드한 파일과 입력한 내용은 서버로 전송되지 않습니다.
텍스트와 속도, 강도, 색 이동, 폰트 크기를 조절하면 브라우저에서 바로 글리치 효과를 미리보고, 그대로 사용할 수 있는 HTML+CSS 코드를 얻을 수 있습니다. 랜딩 페이지 타이틀이나 이벤트 배너에 레트로·사이버펑크 느낌을 주고 싶은 디자이너·퍼블리셔에게 유용하며, 모든 계산은 브라우저 안에서만 처리되고 서버로 전송되지 않습니다.
사용 방법
- 글리치로 표시할 텍스트를 입력합니다.
- 속도, 강도, 색 이동, 글꼴 크기 슬라이더와 두 가지 색상을 조절해 원하는 느낌을 맞춥니다.
- 🎲 패턴 변경 버튼으로 글리치 모양을 무작위로 바꿔볼 수 있습니다.
- 미리보기가 마음에 들면 HTML+CSS 코드를 복사해 프로젝트에 붙여넣습니다.
자주 묻는 질문
- 생성된 코드를 어디에 붙여넣나요?
- HTML은 표시할 위치에, CSS는 스타일시트나 style 태그에 넣으면 됩니다. div의 class와 data-text 속성에 텍스트를 동일하게 입력해야 효과가 정상 작동합니다.
- 텍스트를 바꾸면 애니메이션 모양도 바뀌나요?
- 애니메이션 패턴 자체는 시드값 기반으로 계산되며 텍스트 내용과는 무관합니다. 패턴만 바꾸고 싶다면 🎲 패턴 변경 버튼을 누르세요.
- 이 도구는 서버로 데이터를 전송하나요?
- 아니요. 입력한 텍스트와 설정값은 모두 브라우저 내에서만 처리되며 외부로 전송되지 않습니다.