Trình Tạo Chữ Glitch CSS

Công Cụ Này Là Gì?

Hiệu ứng glitch CSS giả lập vẻ ngoài của một tín hiệu phát sóng bị hỏng hoặc một cuộn băng VHS bị trầy xước bằng cách nhân đôi một đoạn văn bản hai lần thông qua các phần tử giả ::before và ::after, dịch chuyển nhẹ mỗi bản sao bằng một text-shadow có màu (theo kiểu cổ điển là đỏ và lục lam, gợi nhớ lỗi tín hiệu RGB analog), và tạo hoạt ảnh cho clip-path của mỗi bản sao bằng @keyframes để các dải ngang khác nhau của mỗi bản sao có màu nhấp nháy theo thời gian.

Kỹ thuật này không cần hình ảnh, không cần vòng lặp hoạt ảnh JavaScript, không cần canvas — đây hoàn toàn là CSS được xếp lớp trên một phần tử HTML duy nhất mang chính văn bản của nó hai lần: một lần là nội dung văn bản thật, và một lần thông qua thuộc tính data-text mà các phần tử giả đọc bằng content: attr(data-text).

Nguồn: CSS Pseudo-Elements Module Level 4, W3C — định nghĩa các phần tử giả ::before/::after và hàm attr() mà hiệu ứng này được xây dựng dựa trên đó.

Tại Sao Nên Dùng?

• Xem trước hoạt ảnh trực tiếp — bạn thấy hiệu ứng glitch thật khi gõ và điều chỉnh cài đặt, không chỉ là bản mô phỏng tĩnh.
• Hai màu nhấn có thể điều chỉnh độc lập, mặc định là đỏ/lục lam cổ điển nhưng có thể tùy chỉnh theo bất kỳ thương hiệu hay chủ đề nào.
• Thanh trượt cường độ kiểm soát độ lệch pixel của bóng màu; thanh trượt tốc độ kiểm soát chu kỳ keyframe của clip-path nhanh hay chậm.
• Sao chép cả CSS (bao gồm toàn bộ khối @keyframes) lẫn cấu trúc HTML chính xác cần thiết, vì hiệu ứng phụ thuộc vào thuộc tính data-text khớp với văn bản hiển thị.
• CSS thuần túy — không cần JavaScript khi chạy sau khi đã ở trên trang của bạn, và không có thư viện ngoài hay hình ảnh nào cần tải.
• Miễn phí, không cần đăng ký, chạy hoàn toàn trong trình duyệt của bạn.

Cách Sử Dụng

1. Nhập văn bản bạn muốn tạo hiệu ứng glitch vào ô văn bản — bản xem trước cập nhật ngay lập tức.
2. Chọn hai màu nhấn; mặc định cổ điển là đỏ và lục lam cho vẻ ngoài retro tách RGB, nhưng bất kỳ cặp màu tương phản nào cũng phù hợp.
3. Điều chỉnh thanh trượt cường độ để kiểm soát mức độ tách rời của hai lớp màu — giá trị cao hơn tạo cảm giác glitch mạnh mẽ hơn.
4. Điều chỉnh thanh trượt tốc độ để kiểm soát mức độ nhấp nháy nhanh chậm của glitch.
5. Sao chép khối CSS và dán vào stylesheet của bạn.
6. Sao chép đoạn HTML và sử dụng đúng như hiển thị — thuộc tính data-text phải khớp chính xác với văn bản hiển thị của phần tử để hiệu ứng hoạt động.

Ví dụ

Đầu vào

Văn bản: "GLITCH" · Màu 1: #ff0040 (đỏ) · Màu 2: #00fff9 (lục lam) · Cường độ: 5px

Đầu ra

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

Văn bản gốc vẫn giữ màu trắng trong khi hai bản sao phần tử giả của nó nhấp nháy màu đỏ và lục lam ở hai bên, tạo ra vẻ ngoài cổ điển của tín hiệu bị hỏng.

Vì sao phần tử cần thuộc tính data-text

Các phần tử giả ::before và ::after không thể đọc trực tiếp nội dung văn bản thông thường của một phần tử — content: attr() trong CSS chỉ hoạt động với thuộc tính HTML thật, không phải với các nút văn bản con. Đó là lý do HTML được tạo ra lặp lại văn bản dưới dạng thuộc tính data-text="..." trên cùng phần tử: văn bản hiển thị được kết xuất bình thường, trong khi mỗi phần tử giả độc lập lấy cùng chuỗi đó thông qua content: attr(data-text) và xếp lớp bản sao có hoạt ảnh, lệch màu của riêng nó lên trên.

Hiệu ứng nhấp nháy được tạo ra như thế nào

Mỗi phần tử giả được tạo hoạt ảnh bằng khối @keyframes riêng, lần lượt duyệt qua một loạt giá trị clip-path: inset(...). Ở mỗi keyframe, một dải ngang khác nhau của bản sao có màu được hiển thị trong khi phần còn lại bị cắt bỏ, khiến mảnh màu đỏ (hoặc lục lam) hiển thị nhảy lên xuống theo chiều dọc khi hoạt ảnh chạy — kết hợp với độ lệch của bóng màu, điều này tạo cảm giác như các kênh màu bị rách và lệch nhau thay vì một ánh sáng dịu nhẹ.

Hiệu ứng này phù hợp ở đâu

• Tiêu đề hero trên các trang đích về game, cyberpunk, streaming hoặc thương hiệu âm nhạc.
• Trang lỗi / 404, nơi hiệu ứng glitch củng cố chủ đề 'có gì đó đã hỏng'.
• Trạng thái hover hoặc focus trên tiêu đề hoặc logo để tạo điểm nhấn ngắn, thu hút sự chú ý.
• Trạng thái đang tải hoặc 'đang xử lý', nơi hiệu ứng glitch truyền tải hoạt động của hệ thống.
• Chỉ nên dùng chừng mực trên văn bản thân bài — hiệu ứng này cố tình khó đọc thoáng qua, nên phù hợp nhất với tiêu đề ngắn hoặc logo văn bản, không phải đoạn văn dài.

Kết hợp với các công cụ CSS khác

Một tiêu đề glitch thường chỉ là một phần tử trong bố cục tối, tương phản cao lớn hơn. Kết hợp nó với bóng đổ phát sáng mềm mại hoặc góc thẻ bo tròn từ các công cụ CSS khác bên dưới để có vẻ ngoài hoàn thiện hơn.

→ Trình Tạo Box Shadow · Trình Tạo Border Radius

Câu Hỏi Thường Gặp