Trình tạo text-shadow CSS
Trình tạo text-shadow CSS trực tuyến miễn phí. Xếp nhiều lớp bóng với lệch ngang, làm mờ, màu và độ mờ, thử mẫu Neon, 3D, Retro và sao chép mã CSS ngay.
Thuộc tính text-shadow trong CSS là gì?
text-shadow thêm hiệu ứng bóng cho các ký tự chữ. Mỗi bóng được xác định bởi lệch ngang, lệch dọc, bán kính làm mờ tùy chọn và màu sắc, và nhiều bóng có thể kết hợp trong một giá trị phân tách bằng dấu phẩy để tạo hiệu ứng phong phú.
Nhiều lớp bóng hoạt động thế nào?
Các lớp được vẽ từ dưới lên theo thứ tự khai báo, nên bóng đầu tiên trong danh sách nằm trên cùng. Trình tạo này cho phép thêm, xóa, bật và tắt từng lớp, mỗi lớp có lệch, làm mờ, màu và độ mờ riêng để xếp các hiệu ứng như Neon hay 3D.
Lệch X, lệch Y và làm mờ nghĩa là gì?
Lệch X dịch bóng sang trái hoặc phải của ký tự, lệch Y dịch lên hoặc xuống, và bán kính làm mờ làm mềm cạnh bóng: 0 cho cạnh cứng như kiểu Retro hay Viền, còn giá trị lớn hơn loang màu như phát sáng.
Tạo hiệu ứng phát sáng neon thế nào?
Dùng mẫu Neon hoặc đặt nhiều lớp với lệch bằng 0, cùng một màu sáng và giá trị làm mờ tăng dần, ví dụ 0 0 3px, 0 0 8px và 0 0 20px. Các quầng xếp chồng mô phỏng ánh đèn neon.
text-shadow có ảnh hưởng hiệu năng hiển thị không?
Vài lớp tĩnh rất nhẹ, nhưng chữ có nhiều bóng mờ lớn tốn kém hơn khi vẽ lại. Bóng nặng trên đoạn văn dài hoặc hoạt hình text-shadow liên tục có thể gây rớt khung hình trên thiết bị yếu và di động; hãy dùng cho tiêu đề ngắn, làm mờ vừa phải, hoặc hoạt hình độ mờ thay thế.
Làm bóng bán trong suốt ra sao?
Mỗi lớp có thanh trượt độ mờ chuyển màu đã chọn sang dạng rgba, ví dụ rgba(0, 0, 0, 0.5). Bóng bán trong suốt hòa hợp với mọi nền, đúng cách mẫu Giấy dùng để tạo hiệu ứng nhấn nổi mềm.
text-shadow khác box-shadow thế nào?
text-shadow áp dụng cho hình dạng ký tự và không có giá trị lan rộng hay bên trong, trong khi box-shadow bao quanh hộp chữ nhật của phần tử. Cú pháp lệch và làm mờ giống nhau nhưng không thể thay thế cho nhau.
Những trình duyệt nào hỗ trợ text-shadow?
text-shadow được mọi trình duyệt hiện đại hỗ trợ, gồm Chrome, Firefox, Safari, Edge và Opera, và đã ổn định không tiền tố hơn một thập kỷ. Bóng nhiều lớp hoạt động như nhau ở mọi nơi.
Nội dung tôi nhập có được gửi lên máy chủ không?
Không. Văn bản xem trước và mọi lớp bạn cấu hình đều nằm trong trình duyệt, mã CSS được tạo cục bộ trên trang. Không có gì gửi qua mạng nên công cụ vẫn dùng được offline sau khi tải.
Cách sử dụng Trình tạo text-shadow CSS
Thiết kế bóng chữ CSS bằng cách xếp chồng các lớp thay vì đoán mò một giá trị lệch. Mọi thay đổi đều hiển thị ngay trên văn bản xem trước cỡ lớn, và CSS được tạo cục bộ trong trình duyệt của bạn.
- Nhập câu chữ riêng của bạn vào ô 「Văn bản xem trước」 để thử hiệu ứng trên nội dung thật.
- Thử một mẫu dựng sẵn: Neon, Giấy, 3D, Retro, Phát sáng hoặc Viền sẽ tải sẵn các lớp hoàn chỉnh.
- Điều chỉnh Lệch X, Lệch Y, Làm mờ, Màu và Độ mờ của từng lớp bằng các thanh trượt của nó.
- Dùng 「Thêm lớp」 để xếp thêm bóng, bỏ tích một lớp để tạm tắt, hoặc xóa bằng biểu tượng thùng rác.
- Sao chép quy tắc text-shadow đã tạo và dán vào stylesheet của bạn.
Quầng neon đẹp nhất khi dùng ba hoặc bốn lớp cùng màu với độ mờ tăng dần — giữ các giá trị lệch bằng 0 và để độ mờ lo phần phát sáng.
Công cụ liên quan
- Trình tạo Box Shadow CSS Trình tạo box-shadow CSS trực tuyến miễn phí. Tạo bóng đẹp trực quan với offset, blur, spread, màu và inset có thể điều chỉnh. Xem trước trực tiếp và sao chép mã ngay lập tức.
- Trình tạo Gradient CSS Tạo gradient CSS tuyệt đẹp trực quan. Tạo gradient tuyến tính, hướng tâm và hình nón với nhiều điểm dừng màu, góc và vị trí tùy chỉnh. Sao chép mã CSS sẵn sàng sản xuất ngay lập tức.
- Trình Tạo Chữ Nghệ Thuật Trình tạo chữ nghệ thuật miễn phí với 28 kiểu Unicode. Tạo chữ đậm, nghiêng, Gothic và tròn cho bio Instagram, TikTok, WhatsApp và tên game - sao chép một chạm.
- Trình Tạo Bo Góc CSS Trình tạo bo tròn sáng tạo miễn phí trực tuyến. Kéo 8 điểm điều khiển hoặc chọn hình blob có sẵn để tạo hình khối CSS hữu cơ và sao chép mã ngay lập tức.
- Trình chuyển đổi màu Trình chuyển đổi màu trực tuyến miễn phí. Chuyển đổi định dạng HEX, RGB, HSL, HSV ngay lập tức với bộ chọn trực quan. 100% riêng tư, chạy trong trình duyệt của bạn.
- Trình tạo easing CSS Trình tạo easing CSS trực tuyến miễn phí. Kéo các điểm điều khiển cubic-bezier trên đường cong tương tác, chọn trong 18 mẫu có sẵn, xem bóng lặp lại liên tục và sao chép hàm thời gian ngay.
- Trình tạo clip-path CSS Trình tạo clip-path CSS trực tuyến miễn phí. Thiết kế hình polygon, circle, ellipse và inset với các điểm kéo thả, xem trước trực tiếp và sao chép mã CSS chỉ một cú nhấp.
- Làm đẹp CSS Định dạng và làm đẹp mã CSS ngay lập tức. Chuyển đổi CSS đã nén thành mã dễ đọc với các tùy chọn tùy chỉnh.