CSS Trình tạo văn bản phát sáng và neon

Công cụ này tạo chữ phát sáng giống biển hiệu đèn neon bằng thuộc tính CSS text-shadow. Ở bên trái, bạn nhập văn bản xem trước rồi chỉnh cỡ chữ (20 đến 100px), bán kính phát sáng (2 đến 30px), màu phát sáng và kiểu phông chữ (Monospace, Sans-serif, Serif hoặc Cursive). Bản xem trước cập nhật ngay lập tức và mã CSS hiện bên dưới để sao chép. Cấu hình màu hồng mặc định xuất ra .neon-text { color: #ffffff; font-family: sans-serif; font-size: 48px; text-shadow: 0 0 4px #fff, 0 0 10px #ff007f, 0 0 20px #ff007f; } cùng một hoạt ảnh nhấp nháy.

Hiệu ứng gồm ba lớp text-shadow. Lớp đầu là ánh sáng trắng 4px mô phỏng lõi sáng nhất của ống neon. Lớp thứ hai dùng màu bạn chọn với độ mờ bằng bán kính phát sáng, lớp thứ ba cùng màu nhưng độ mờ gấp đôi để tạo quầng sáng lan ra ngoài. Bản thân chữ có màu trắng vì phần lõi của ống neon thật trông gần như trắng, còn màu sắc chủ yếu đến từ quầng sáng xung quanh. Bán kính càng lớn thì quầng sáng càng mềm và rộng, nhưng với chữ nhỏ sẽ dễ bị nhòe, nên hãy giảm bán kính khi giảm cỡ chữ.

Khi bật hoạt ảnh xung, CSS sẽ có thêm quy tắc @keyframes neon-pulse: ở giữa chu kỳ, quầng sáng thu nhỏ còn một nửa và độ mờ đục giảm xuống 0,85, sau đó chạy qua lại với alternate và ease-in-out như thể biển hiệu đang thở. Tốc độ xung từ 0,5 đến 4 giây; số càng nhỏ thì nhấp nháy càng nhanh. Bốn chủ đề có sẵn (Cyberpunk hồng, Cực quang xanh lục, Đại dương sâu thẳm xanh lam không nhấp nháy, Ánh hoàng hôn cam) áp dụng màu, bán kính, cỡ chữ và hoạt ảnh chỉ với một cú nhấp.

Chữ neon đẹp nhất trên nền tối; trên nền trắng, quầng sáng gần như biến mất. Nên để nhịp nhấp nháy chậm vì nháy nhanh có thể gây khó chịu cho một số người, và cân nhắc tắt hoạt ảnh bằng media query prefers-reduced-motion. text-shadow là CSS thuần, không cần hình ảnh hay JavaScript, và chạy trên mọi trình duyệt hiện đại. Lớp được sao chép có tên .neon-text, bạn có thể đổi tên rồi áp dụng cho tiêu đề hoặc nút bấm.