Thiết kế bề mặt CSS kiểu kính và neumorphism với bản xem trước trực tiếp.
Cập nhật lần cuối
Coddy dạy bạn bằng cách viết code thật ngay trên trình duyệt: bài học tương tác, phản hồi tức thì và AI hỗ trợ khi bạn bị kẹt.
*Glassmorphism* và *neumorphism* là hai phong cách bề mặt bạn sẽ gặp khắp nơi trong thiết kế web hiện đại. **Kính** là kiểu tấm kính mờ: một thẻ trong suốt làm mờ mọi thứ nằm phía sau, thường đặt trên nền gradient nhiều màu hoặc ảnh chụp. **Neumorphism** là kiểu nhựa mềm: một thẻ trông như nổi lên (hoặc lún xuống) khỏi bề mặt, được chiếu sáng bằng cặp bóng sáng và tối cùng tông màu với nền.
Cả hai hiệu ứng đều là CSS thuần: không hình ảnh, không JavaScript, không thư viện. Kính dựa vào backdrop-filter: blur() cùng một lớp nền trong suốt và một viền mảnh. Neumorphism được tạo từ một cặp khai báo box-shadow: một bóng hơi tối hơn bề mặt, một bóng hơi sáng hơn, lệch theo hai hướng ngược nhau. Phép tính thì ngắn, nhưng tự chỉnh từng giá trị cho đến khi mọi thứ vừa vặn thì khá mất thời gian. Công cụ tạo giúp bạn bỏ qua bước đó.
Công cụ này có thanh trượt cho mọi tham số quan trọng, một khung xem trước đặt trên nền có thể tùy chỉnh (để hiệu ứng kính thực sự có thứ để làm mờ), và nút sao chép CSS kết quả chỉ với một cú nhấp. Mọi thứ chạy trong trình duyệt: dán đoạn code thẳng vào stylesheet là xong.
backdrop-filter là thuộc tính tạo nên glassmorphism: nó làm mờ và tăng độ bão hòa cho những gì nằm *phía sau* phần tử, không phải bản thân phần tử.rgba(...) với alpha thấp) và một viền sáng mảnh để trông như vật liệu kính mờ thật; bỏ một trong hai là hiệu ứng sụp đổ.box-shadow, không phải một: một bóng tối hơn ở góc dưới bên phải và một điểm sáng hơn ở góc trên bên trái, cả hai đều theo tông màu bề mặt thay vì đen/trắng thuần.inset cho các bóng: cùng con số, hướng thị giác ngược lại (lõm vào thay vì nổi lên).Chuyển giữa **Kính** và **Neumorphism** ở phía trên. Kính cần một nền phía sau; neumorphism nằm trên một màu bề mặt phẳng do bạn chọn.
Với kính, các yếu tố quan trọng là *blur* (nền phía sau bị làm nhòe đến mức nào), *độ trong suốt của nền* (thẻ trong đến mức nào) và *tông màu* (một lớp màu phủ nhẹ). Với neumorphism, các yếu tố quan trọng là *khoảng cách* (bóng lệch xa đến đâu), *blur* (bóng mềm đến mức nào) và *cường độ* (bóng sáng/tối khác bề mặt bao nhiêu).
Kính đẹp nhất trên gradient rực rỡ hoặc ảnh chụp. Neumorphism đẹp nhất trên một màu dịu, hơi lệch khỏi màu thuần (#e0e5ec là màu "xám neumorphic" kinh điển). Công cụ có sẵn một hàng màu mẫu để bạn nhấn chọn.
Neumorphism có ba kiểu: **Nổi** (nhô lên), **Phẳng** (cùng bóng, không có nền gradient) và **Lõm** (ấn vào). Hãy thử cả ba: chúng dùng chung phép tính bóng đổ, chỉ khác hướng.
Nhấn **Sao chép** và thả đoạn code vào stylesheet. Kết quả dùng ngay được: có sẵn -webkit-backdrop-filter với tiền tố cho Safari đời cũ, các thuộc tính được sắp xếp, và border-radius tương ứng để chạy được như một class duy nhất.
Những thuộc tính mà mỗi hiệu ứng thực sự dựa vào. Tài liệu đầy đủ ở trang backdrop-filter của MDN và box-shadow.
| Phong cách | Thuộc tính chính | Cần chỉnh gì | Ghi chú |
|---|---|---|---|
| Kính | backdrop-filter, background trong suốt, border mảnh | Blur, độ bão hòa, alpha | Luôn đặt -webkit-backdrop-filter để tương thích với Safari |
| Neumorphism (nổi) | Hai khai báo box-shadow + nền gradient tuyến tính | Khoảng cách, blur, cường độ sáng/tối | Màu bóng nên khớp với tông màu bề mặt, không dùng đen/trắng thuần |
| Neumorphism (lõm) | Hai khai báo box-shadow có inset | Cùng các tùy chỉnh như kiểu nổi | Kiểu lõm trông như nút đang được nhấn hoặc ô nhập liệu chìm xuống |
| Kết hợp / lai | Kính đặt trên tấm neumorphic | Xếp chồng cẩn thận: quá nhiều filter sẽ làm hiệu năng tụt mạnh | Phổ biến trên dashboard: thẻ neumorphic, header phủ kính |
background: rgba(255, 255, 255, 0.18);backdrop-filter: blur(14px) saturate(180%);-webkit-backdrop-filter: blur(14px) saturate(180%);border: 1px solid rgba(255, 255, 255, 0.30);border-radius: 16px;box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);Glassmorphism kinh điển. saturate(180%) thêm chút màu rực phía sau lớp blur: thiếu nó, kính mờ trông nhợt nhạt. Đặt đoạn này trên gradient hero hoặc ảnh chụp.
background: linear-gradient(145deg, #f0f5fa, #cdd1d7);border-radius: 24px;box-shadow: 16px 16px 32px #b8bcc1, -16px -16px 32px #ffffff;Hai bóng đổ làm phần việc chính: một bóng tối hơn ở góc dưới bên phải và một điểm sáng hơn ở góc trên bên trái. Nền gradient thêm độ bóng nhẹ mà mắt nhìn thấy như "nhựa".
background: #e0e5ec;border-radius: 24px;box-shadow: inset 8px 8px 16px #b8bcc1, inset -8px -8px 16px #ffffff;Thêm inset cho cả hai bóng là thẻ trông lõm vào thay vì nổi lên, rất hợp cho ô nhập liệu và nền của nút gạt.
-webkit-backdrop-filter. Safari đời cũ (và mọi WebView nhúng) bỏ qua backdrop-filter nếu thiếu tiền tố, và tấm kính của bạn biến thành một khối đặc.backdrop-filter. Mỗi lớp là một lượt blur theo thời gian thực trên GPU: ba hay bốn lớp trên cùng một màn hình là dashboard bắt đầu tụt khung hình.Glassmorphism là kiểu kính mờ: thẻ trong suốt với nền phía sau bị làm mờ lộ qua. Neumorphism là kiểu nhựa mềm: một thẻ đặc trông như nổi lên (hoặc lún xuống) khỏi bề mặt nhờ cặp bóng sáng/tối. Chúng giải quyết những vấn đề thị giác khác nhau và hiếm khi xuất hiện cùng nhau.
-webkit-backdrop-filter bên cạnh thuộc tính chuẩn backdrop-filter. Công cụ này tự động xuất cả hai. Thiếu tiền tố, Safari đời cũ và WebView trên iOS sẽ chỉ hiển thị màu background bên dưới và hiệu ứng kính biến mất.Neumorphism thuần nổi tiếng là khó đảm bảo trợ năng vì độ tương phản giữa thẻ và bề mặt được cố ý để thấp. Nếu dùng, hãy kết hợp với độ tương phản chữ cao (≥ 4.5:1), viền focus dễ thấy và nhãn ARIA cho nút chỉ có icon, đồng thời tránh dùng neumorphism cho những phần tử *bắt buộc* phải nổi bật (thông báo lỗi, nút kêu gọi hành động chính).
Có hai nguyên nhân phổ biến: nền phía sau không có màu (kính trên nền trắng thì không có gì để làm mờ), hoặc bán kính blur quá thấp (dưới khoảng 8px gần như không làm đổi màu phía sau). Thêm gradient hoặc hình ảnh phía sau thẻ và tăng blur lên khoảng từ 12 đến 20px.
backdrop-filter được hỗ trợ trên mọi trình duyệt luôn tự cập nhật. box-shadow được hỗ trợ ở mọi nơi. Chỉ cần để ý hiệu năng: backdrop-filter là thao tác GPU chạy theo từng khung hình, nên hãy giữ số lớp kính trên một màn hình ở mức ít.