CodeKitHubCông Cụ Này Là Gì?
Công cụ này kết hợp một text-shadow màu sáng và một text-shadow màu tối, lệch theo hai hướng ngược nhau, để tạo ảo giác chữ nổi lên (embossed) hoặc khắc chìm xuống (engraved).
Chuyển đổi giữa kiểu Nổi và Chìm, đồng thời điều chỉnh thanh trượt cường độ để kiểm soát độ mạnh của hiệu ứng 3D.
Bản xem trước trực tiếp cập nhật ngay khi bạn gõ chữ hoặc chỉnh bất kỳ tùy chọn nào, giúp bạn tinh chỉnh hiệu ứng trước khi sao chép CSS.
Tại Sao Nên Dùng?
- Bạn đang làm landing page cho một shop online phong cách vintage và khách hàng muốn logo chữ "trông như được dập nổi trên kim loại" — chọn kiểu Nổi, chỉnh cường độ, rồi sao chép CSS thẳng vào phần hero của trang.
- Bạn phát triển giao diện app bán hàng theo phong cách skeuomorphic retro, giống máy tính tiền cổ điển, và cần số tổng tiền trông như khắc trên bảng kim loại — kiểu Chìm phù hợp cho hiệu ứng này mà không cần thêm hình ảnh nào.
- Bạn làm huy hiệu "Người bán uy tín" cho một sàn thương mại nhỏ và muốn chữ trông sang trọng mà không cần mở Photoshop — tạo ở đây, chỉnh màu vàng, rồi dán CSS vào component React.
- Bạn nhận dự án freelance làm website cho clan game và họ muốn tiêu đề trang trông như khắc trên đá theo phong cách fantasy — thử kiểu Chìm với màu xám đậm để có hiệu ứng phù hợp.
- Bạn đang thử nghiệm thiết kế giao diện cho portfolio cá nhân và muốn thể hiện khả năng tạo hiệu ứng CSS thuần túy không cần hình ảnh hay thư viện ngoài — công cụ này cho mã gọn gàng bạn có thể giải thích ngay trong README GitHub.
- Deadline sửa thiết kế là sáng mai và khách hàng vừa yêu cầu nút CTA trên landing page "nổi nhẹ lên cho đỡ phẳng" — thay vì mở lại Figma, tạo ngay ở đây rồi dán CSS vào nút đã có sẵn.
Cách Sử Dụng
- Nhập đoạn văn bản bạn muốn tạo hiệu ứng.
- Chọn kiểu Nổi (raised) hoặc Chìm (carved) từ bộ chọn kiểu.
- Điều chỉnh thanh trượt cường độ và chọn màu nền, màu chữ phù hợp với thiết kế của bạn.
- Nhấn "Copy" để sao chép mã CSS đã tạo và dán vào stylesheet của bạn.
Ví dụ
Đầu vào
Văn bản: "Embossed", Kiểu: Nổi, Cường độ: 2Đầu ra
color: #c0c0c0;
background: #c0c0c0;
text-shadow: -2px -2px 1px rgba(255,255,255,0.7), 2px 2px 1px rgba(0,0,0,0.5);Mã CSS được tạo ra thiết lập màu chữ, màu nền, và một text-shadow hai lớp tạo nên hiệu ứng nổi hoặc khắc chìm.
Hiệu ứng này hoạt động như thế nào
Hiệu ứng nổi và khắc chìm được tạo từ hai lớp text-shadow lệch nhau với màu sáng và tối ngược chiều.
| Thuộc tính | Chức năng |
|---|---|
| Bóng sáng (rgba(255,255,255,0.7)) | Mô phỏng nguồn sáng chiếu vào một cạnh của chữ |
| Bóng tối (rgba(0,0,0,0.5)) | Mô phỏng bóng đổ xuống cạnh đối diện |
| Hướng lệch | Đảo ngược giữa kiểu Nổi và Chìm để lật ngược ảo giác 3D |
| Cường độ | Kiểm soát khoảng lệch của bóng sáng và bóng tối so với chữ |
| Màu tương đồng | Màu chữ và màu nền được đặt gần nhau để che đi độ tương phản phẳng |
Công cụ liên quan
Để có thêm các công cụ tạo CSS, hãy thử những công cụ sau.
→ Trình Tạo Hiệu Ứng Glassmorphism CSS · Trình Tạo Box Shadow · Trình Tạo Bo Góc (Border Radius)
Khi nào dùng Nổi và khi nào dùng Chìm
Kiểu Nổi phù hợp cho phần tử muốn tạo cảm giác "nhô lên" khỏi bề mặt, như tiêu đề thẻ sản phẩm, huy hiệu thành tích, hoặc logo muốn trông như dập nổi trên bao bì. Hiệu ứng này khiến phần tử nổi bật và thu hút hơn so với chữ phẳng thông thường.
Kiểu Chìm hợp hơn cho phần tử muốn tạo cảm giác "chìm vào" bề mặt, như nhãn trên bảng kim loại trong giao diện skeuomorphic, số serial trên thẻ thành viên, hoặc tiêu đề trong game theo phong cách đá và kim loại. Cảm giác tạo ra trầm tĩnh và trang trọng hơn so với kiểu Nổi.
Với cả hai kiểu, tránh dùng màu chữ khác biệt quá xa với màu nền — độ tương phản quá cao giữa chữ và nền sẽ làm hiệu ứng 3D từ bóng đổ trở nên khó nhận ra, vì mắt sẽ tập trung vào tương phản màu thay vì dải sáng-tối của bóng.
Câu Hỏi Thường Gặp
Sự khác biệt giữa Nổi (Embossed) và Chìm (Engraved) là gì?
Kiểu Nổi khiến chữ trông như nhô lên khỏi nền, với bóng sáng ở góc trên-trái và bóng tối ở góc dưới-phải. Kiểu Chìm đảo ngược điều này, khiến chữ trông như được khắc chìm vào trong nền.
Tại sao hiệu ứng lại đẹp nhất khi màu chữ và màu nền gần giống nhau?
Ảo giác nổi/chìm hoàn toàn dựa vào các điểm sáng và bóng tối của text-shadow, chứ không dựa vào độ tương phản giữa chữ và nền — vì vậy đặt màu chữ gần giống (hoặc trùng) với màu nền thường cho kết quả sạch đẹp nhất.
Tôi có thể dùng hiệu ứng này cho phần tử khác ngoài chữ không?
Thuộc tính text-shadow mà công cụ này tạo ra chỉ áp dụng cho văn bản. Để có hiệu ứng tương tự trên hình khối hoặc nút bấm, bạn cần một cấu hình box-shadow tương ứng.
Công cụ này có lưu hay theo dõi những gì tôi nhập không?
Không. CSS được tạo hoàn toàn trong trình duyệt của bạn — không có gì được gửi lên hoặc lưu trên máy chủ.
Hiệu ứng này có hoạt động trên mọi trình duyệt không?
Có — text-shadow được hỗ trợ rất tốt trên tất cả các trình duyệt hiện đại, bao gồm Chrome, Firefox, Safari và Edge.
Tại sao hiệu ứng nổi của tôi hoàn toàn không thấy trên nền tối?
Rất có thể màu chữ của bạn tương phản quá mạnh với bóng tối của hiệu ứng, khiến bóng tối bị chìm và chỉ còn thấy điểm sáng. Với nền tối, hãy thử tăng thủ công độ mờ (opacity) của bóng tối trong CSS đã tạo, hoặc dùng màu chữ gần với màu nền tối hơn.
Tôi có thể dùng bất kỳ font nào với hiệu ứng này, hay có giới hạn gì không?
Hiệu ứng hoạt động với mọi font, nhưng kết quả rõ nhất khi dùng font đậm (bold) cỡ lớn, vì text-shadow cần đủ diện tích chữ để thể hiện dải sáng-tối. Font mảnh hoặc cỡ nhỏ thường khiến hiệu ứng khó thấy hoặc trông lộn xộn.
Hiệu ứng này có dùng được trong component React hoặc Vue, không chỉ HTML tĩnh không?
Được — CSS được tạo ra chỉ là các thuộc tính chuẩn (color, background, text-shadow) có thể dán thẳng vào file CSS, CSS Module, styled-components, hoặc thuộc tính style inline trong bất kỳ framework nào mà không cần chỉnh sửa thêm.
Cường độ thấp và cường độ cao khác nhau về mặt hình ảnh như thế nào?
Cường độ thấp tạo hiệu ứng nổi nhẹ nhàng, tinh tế, phù hợp cho chữ nội dung hoặc phần tử nhỏ để không quá nổi bật. Cường độ cao làm khoảng lệch bóng xa hơn, tạo hiệu ứng 3D rõ rệt hơn, thường hợp với tiêu đề lớn hoặc logo.