Trình tạo hiệu ứng chữ CSS
Nhập dòng chữ của riêng bạn và xem trước trực tiếp các hiệu ứng CSS neon glow, 3D extrude, letterpress, viền ngoài và tô màu chuyển sắc, với các tham số được tính toán bằng công thức toán học thực tế và một khối CSS có thể sao chép.
🔒 Được xử lý hoàn toàn trong trình duyệt của bạn — không có nội dung nào bạn nhập ở đây được tải lên.
Kết quả
Hầu hết các bộ sưu tập hiệu ứng chữ CSS chỉ cung cấp một mẫu cố định: một kiểu neon glow, một kiểu nổi 3D, chấp nhận hoặc bỏ qua. Trình tạo này xây dựng CSS từ chính các tham số của bạn, trên dòng chữ bạn thực sự nhập vào. Chọn neon glow, 3D extrude, letterpress/dập nổi, viền ngoài hoặc tô màu chuyển sắc từ bộ chọn hiệu ứng, điều chỉnh các điều khiển riêng của hiệu ứng đó, và bản xem trước trực tiếp cùng khối CSS có thể sao chép bên dưới sẽ cập nhật theo mỗi thay đổi.
Hiệu ứng 3D extrude là hiệu ứng đáng để hiểu rõ: với độ sâu đã chọn (số lớp chồng lên nhau) và một góc, lớp thứ i được dịch chuyển theo chiều ngang một khoảng i × cos(góc) và theo chiều dọc một khoảng i × sin(góc), được tính trong JavaScript bằng các hàm lượng giác thực sự — không tra từ bảng giá trị của các góc định sẵn. Ở góc 45 độ, độ dịch ngang và dọc bằng nhau cho mọi lớp, vì cos và sin của 45° có cùng giá trị; hãy xoay thanh trượt góc và quan sát toàn bộ chồng lớp `text-shadow` xoay quanh chữ cái trong thời gian thực, mỗi lớp tối hơn lớp trước một chút để mô phỏng một mặt 3D được chiếu sáng.
Neon glow chồng bốn lớp `text-shadow` với bán kính nhòe tăng dần theo màu bạn chọn, cùng hiệu ứng nhấp nháy tùy chọn: bật nó lên và một luật `@keyframes` với chuỗi giảm độ trong suốt ngẫu nhiên sẽ được tạo ra và hiển thị trực tiếp, kèm theo một nút 'tạo lại' để bạn làm mới mẫu mà không cần tự viết bất kỳ keyframe nào. Chữ viền ngoài áp dụng `-webkit-text-stroke` cho các trình duyệt hỗ trợ, cùng với một phương án dự phòng `text-shadow` 8 hướng trung thực cho những trình duyệt không hỗ trợ — cả hai dòng đều có trong CSS được sao chép cùng ghi chú giải thích. Tô màu chuyển sắc cắt một `linear-gradient` theo hình dạng chữ bằng `background-clip: text`, hiện là thuộc tính chuẩn với khả năng hỗ trợ rộng rãi, vẫn giữ lại dòng có tiền tố `-webkit-` cho các công cụ render cũ.
Mọi thứ được hiển thị ngay trên trình duyệt của bạn — không có dòng chữ nào bạn nhập bị gửi đi bất cứ đâu. Sao chép khối CSS hoàn chỉnh, bao gồm cả luật `@keyframes` khi hiệu ứng cần đến, dán thẳng vào tệp CSS của bạn.