Tạo bóng chữ CSS
Thiết kế trực quan hiệu ứng CSS text-shadow nhiều lớp. Điều chỉnh offset, blur, màu sắc và độ mờ. Sao chép CSS ngay lập tức.
Văn Bản Xem Trước
Cỡ Chữ — 48px
Màu Văn Bản
Màu Nền
Lớp Bóng (1)
Lệch X
Lệch Y
Mờ
Màu sắc
Độ Mờ — 30%
CSS Đã Tạo
text-shadow: 2px 2px 6px rgba(0,0,0,0.30);
Giới thiệu công cụ
Công Cụ Tạo Bóng Văn Bản CSS cho phép bạn tạo bóng văn bản nhiều lớp trực quan và ngay lập tức nhận được đầu ra CSS. Mỗi lớp có các điều khiển độc lập cho lệch X/Y, bán kính mờ, màu sắc và độ mờ.
Độ mờ được áp dụng dưới dạng kênh alpha RGBA, cung cấp độ trong suốt mượt mà mà không cần các thủ thuật dành riêng cho trình duyệt. CSS được tạo hoạt động trên tất cả các trình duyệt hiện đại.
Cách sử dụng
- Chọn một cài đặt sẵn để bắt đầu, hoặc cấu hình các lớp theo cách thủ công.
- Nhập văn bản xem trước và điều chỉnh cỡ chữ và màu sắc.
- Thêm nhiều lớp hơn với + Thêm Lớp cho các hiệu ứng phức tạp.
- Nhấp Sao Chép CSS để sao chép khai báo text-shadow trực tiếp vào stylesheet của bạn.
Trường hợp sử dụng
Các nhà phát triển frontend tạo tiêu đề phần hero có chiều sâu. Các nhà thiết kế tạo nguyên mẫu hiệu ứng văn bản trong CSS. Các nhóm marketing tạo văn bản CTA bắt mắt với hiệu ứng phát sáng và neon.
Câu hỏi thường gặp
- Tôi có thể thêm bao nhiêu lớp? — Không có giới hạn cứng. CSS hỗ trợ bất kỳ số lượng giá trị text-shadow nào phân cách bằng dấu phẩy. Trên thực tế, 1-4 lớp bao gồm hầu hết các hiệu ứng.
- text-shadow có hoạt động trên tất cả các trình duyệt không? — Có. text-shadow được hỗ trợ đầy đủ trên tất cả các trình duyệt hiện đại từ năm 2012.
- Bán kính mờ 0 là gì? — Bóng cạnh cứng không có mờ, hữu ích cho các hiệu ứng retro hoặc viền.