Bỏ qua tới nội dung
Toolars
Khám phá
Báo lỗi

Tiện ích Thiết kế · Cục bộ

Trình tạo hiệu ứng glitch chữ CSS

CSS Text Glitch Effect Generator

Tạo hiệu ứng chữ glitch ba lớp với kênh cyan và đỏ, độ lệch 1–12 px và chu kỳ 0,2–3 giây. Bản xuất kèm data-text và khối prefers-reduced-motion.

Lộ trình tác vụ / từ đầu vào đến kết quả

Nhập văn bản xem trước

Chạy cục bộ · Không có gì được tải lên

Cách Trình tạo hiệu ứng glitch chữ CSS hoạt động, quyền riêng tư và các công cụ liên quan

Lộ trình tác vụ / từ đầu vào đến kết quả

Cách tạo hiệu ứng chữ glitch bằng CSS

  1. 01

    Nhập văn bản xem trước

    Nhập 1–32 ký tự vào Văn bản xem trước — bộ đếm cạnh nhãn theo dõi độ dài. Những từ ngắn, rộng đọc đẹp nhất khi các lớp bắt đầu tách ra.

  2. 02

    Đặt ba màu

    Màu chữ tô lớp nền, còn Kênh cyan và Kênh đỏ là các bản sao lệch tạo ra viền sắc sai. Các kênh gần cyan và đỏ thuần cho vẻ sắc sai kinh điển; các kênh dịu tạo ra sự tách hiện đại, tinh tế hơn.

  3. 03

    Tinh chỉnh chuyển động glitch

    Độ lệch lớp (1–12 px) đặt khoảng các bản sao trôi đi, và Thời lượng chu kỳ (0.2–3 s) đặt tốc độ vòng lặp. Bản xem trước dàn dựng cả ba lớp trực tiếp.

  4. 04

    Hiểu ba lớp

    Phần tử nền giữ Màu chữ của bạn, trong khi bản sao cyan bị cắt về phần trên của dòng và bản sao đỏ về phần dưới. Mỗi bản sao chạy một animation steps(2, end) — nhảy giật thay vì trượt mượt — và đó chính là thứ khiến glitch giống nhiễu tín hiệu.

  5. 05

    Sao chép CSS glitch

    Nhấn Sao chép CSS hoặc Tải xuống .css để lưu toolars-text-glitch.css. Một khối prefers-reduced-motion đi kèm bản xuất và giữ một viền tĩnh cho người dùng nhạy cảm với chuyển động. Bảng đầu ra hiển thị số byte trực tiếp, và cả hai hành động đều bị vô hiệu hóa khi văn bản chưa qua kiểm tra.

  6. 06

    Thêm thuộc tính data-text

    Các bản sao đọc nội dung từ attr(data-text), nên phần tử của bạn cần một thuộc tính data-text giống hệt văn bản hiển thị. Khi nội dung chữ thay đổi về sau, hãy cập nhật cả hai — thuộc tính chính là thứ mà các lớp cyan và đỏ thực sự vẽ. Thuộc tính nằm trên cùng phần tử với class, nên toàn bộ hiệu ứng gói gọn trong một thẻ.

Thông tin công cụ

Xử lý
Trong trình duyệt của bạn
Dữ liệu nhập rời thiết bị này
Không bao giờ
Lưu giữ
Không có gì được lưu
Giá
Miễn phí

Dữ liệu bạn nhập ở lại trong trình duyệt.

Trình tạo hiệu ứng glitch chữ CSS dùng lộ trình thực thi cục bộ đã xác minh và không tạo lịch sử đầu vào hay đầu ra ẩn.

Thực thi cục bộ

Chạy bên trong tab trình duyệt hiện tại.

Không xử lý ẩn

Dữ liệu công cụ đang hoạt động không bao giờ trở thành bản ghi tài liệu của Toolars.

Không cần tài khoản

Dùng quy trình cốt lõi mà không cần tạo hồ sơ. Mục yêu thích đồng bộ vào tài khoản sau khi bạn đăng nhập.

Đặt lại ngay lập tức

Xóa tab và dữ liệu đang làm việc sẽ biến mất.

Trình tạo hiệu ứng glitch chữ CSS thực sự làm gì

Một overlay livestream muốn tiêu đề lách tách, một trang 404 cần vừa đủ sự đe dọa, một màn hình splash hội nghị đang theo đuổi năng lượng terminal hoài cổ. Chữ glitch rất dễ làm quá tay, đó là lý do độ lệch và thời lượng luôn bị chặn — và vì hiệu ứng được tổ hợp trong tab này, một wordmark chưa công bố không bao giờ rời khỏi máy trong lúc bị thử sức. Những từ ngắn ở cỡ lớn mang hiệu ứng đẹp nhất, nên hãy thử với tiêu đề thật thay vì chữ giữ chỗ. Các keyframes xuất ra giữ đúng độ lệch và nhịp điệu bạn đã chốt.

Câu hỏi thường gặp

Hiệu ứng cần markup như thế nào?
Một phần tử với class .glitch và một thuộc tính data-text giống hệt nội dung văn bản của nó. Các bản sao ::before và ::after được vẽ từ thuộc tính đó, rồi bị cắt về nửa trên và nửa dưới của dòng.
Giới hạn văn bản là gì?
Văn bản xem trước chấp nhận 1 đến 32 ký tự, với bộ đếm trực tiếp cạnh trường nhập. Văn bản rỗng hoặc vượt giới hạn sẽ không qua kiểm tra và hiện trạng thái KIỂM TRA GIÁ TRỊ cho đến khi được sửa.
Nó hoạt động thế nào với người dùng reduced-motion?
Bản xuất kèm một khối prefers-reduced-motion dừng cả hai animation và hạ các bản sao xuống 45% độ mờ, để lại một viền sắc sai tĩnh thay vì một viền chuyển động. Văn bản nền không bị động đến trong cả hai trường hợp, nên thông điệp vẫn đọc được ở cả hai chế độ.
Vì sao animation nhảy giật thay vì trượt mượt?
Cả hai animation của bản sao dùng steps(2, end), khiến transform bật giữa các vị trí rời rạc thay vì nội suy mượt mà. Bước nhảy cứng đó chính là dấu ấn của thẩm mỹ nhiễu tín hiệu; Độ lệch lớp đặt quãng đường mỗi cú nhảy đi được.
Giá trị độ lệch và thời lượng nào dùng tốt?
Độ lệch 1–3 px với chu kỳ quanh một giây đọc như nhiễu tinh tế và hợp với các tiêu đề cần giữ độ dễ đọc. Chỉ đẩy tới 8–12 px với chu kỳ nhanh hơn cho những từ trang trí ngắn; mặc định 4 px, 0.85 s nằm an toàn ở giữa.
Văn bản tôi gõ có bị gửi đi đâu không?
Không. Hiệu ứng render cục bộ trong tab trình duyệt hiện tại, không cần tài khoản, và văn bản không bao giờ đi vào bộ nhớ lưu trữ, log hay mạng. Nhấn Đặt lại để khôi phục mẫu mặc định.

Tiếp tục trong Thiết kế

Tác vụ liên quan, không phải ngõ cụt.

Chuyển sang một không gian làm việc tập trung khác mà không cần quay lại mục lục đầy đủ.

Trình tạo animation loading CSS

CSS Loader Generator

Thiết kế spinner vòng quỹ đạo hoặc ba chấm nảy với khung 24–160 px, chu kỳ 0,2–4 giây và màu tùy chọn, rồi sao chép CSS kèm @keyframes và reduced-motion.

Tạo

Trình tạo hộp kiểm CSS

CSS Checkbox Generator

Tạo kiểu checkbox 18–64 px giữ nguyên input thật — focus bàn phím và công nghệ hỗ trợ vẫn hoạt động — với màu hai trạng thái, rồi sao chép CSS sẵn dùng.

Tạo

Trình tạo công tắc CSS

CSS Switch Generator

Thiết kế công tắc CSS thuần với thanh trượt 44–128 px và núm trượt khớp tự động, xem trước hiệu ứng 180 ms, rồi sao chép mã kèm xử lý focus và reduced-motion.

Tạo

Trình tạo clip path CSS

CSS Clip Path Generator

Chỉnh đỉnh bằng cách kéo, bàn phím hoặc tọa độ. Bắt đầu từ bốn mẫu và sao chép khai báo clip-path hoặc CSS đầy đủ ngay trên máy.

Tạo