Neumorphism Generator

Tính năng nổi bật

• Bốn kiểu khối: Flat nổi phẳng, Concave lõm, Convex lồi và Pressed nhấn chìm bằng bóng inset
• Bảng chọn màu nền, mặc định là màu xám xanh nhạt thường dùng cho Soft UI
• Thanh trượt khoảng cách bóng từ 5 tới 50 pixel, quyết định độ nổi của khối
• Thanh trượt độ mờ từ 20 tới 100 pixel để chỉnh mức mềm của rìa bóng
• Thanh trượt cường độ từ 5 tới 30 phần trăm, chính là mức lệch độ sáng của hai màu bóng
• Thanh trượt bán kính bo góc từ 0 tới 150 pixel và kích thước khối xem trước từ 100 tới 300 pixel
• Tự suy ra màu bóng sáng và bóng tối từ màu nền bằng cách đổi sang hệ HSL rồi cộng trừ độ sáng
• Khung xem trước đặt trên đúng màu nền đã chọn, kèm ô mã CSS cập nhật ngay và nút sao chép

Neumorphism sai một chút là hỏng, mà chỗ sai lại nằm ở màu bóng

Nhìn qua thì Neumorphism chỉ là một khối bo góc có hai cái bóng, tự viết tay cũng được. Nhưng thứ quyết định hiệu ứng có ra đúng chất hay không lại là hai màu bóng, và hai màu này phải là chính màu nền được làm sáng lên và tối đi cùng một lượng, giữ nguyên sắc màu và độ bão hòa. Rất nhiều người lấy đại màu xám và màu trắng, kết quả là khối trông bẩn hoặc bị viền xám lạc lõng trên nền có sắc màu. Tính tay đường này khá phiền vì phải chuyển màu nền từ mã hex sang hệ HSL, cộng trừ độ sáng, rồi đổi ngược về hex. Công cụ làm đúng chuỗi biến đổi đó cho bạn và ràng buộc hai bóng luôn đối xứng qua tâm khối, nên thay vì ngồi thử số bạn chỉ cần kéo ba thanh trượt và nhìn. Điều nó không làm thay được là quyết định có nên dùng phong cách này hay không, vì đây là phong cách có vấn đề thật về độ tương phản.

Lợi ích khi sử dụng

• •Không phải tự chuyển màu qua lại giữa hex và HSL để tính hai màu bóng
• •Thấy ngay tương quan giữa khoảng cách, độ mờ và cường độ thay vì đoán số trong trình soạn thảo
• •Mã sinh ra ngắn và đúng thứ tự, dán thẳng vào lớp CSS có sẵn được ngay
• •Bốn kiểu khối bao đủ các trạng thái thường gặp của một thành phần giao diện
• •Chạy hoàn toàn trong trình duyệt nên dùng được cả khi đang làm việc trên mạng nội bộ

Cách tạo một khối Neumorphism

1. 1Chọn màu nền trước tiên, và chọn một màu nhạt vừa phải vì toàn bộ hai màu bóng đều được suy ra từ màu này.
2. 2Chọn kiểu khối theo vai trò của thành phần: Flat cho thẻ nội dung, Convex cho nút bấm, Concave cho ô nhập, Pressed cho trạng thái đang được chọn.
3. 3Kéo khoảng cách và độ mờ theo tỷ lệ khoảng một phần ba, ví dụ khoảng cách 20 pixel đi với độ mờ khoảng 60 pixel, để rìa bóng mềm mà vẫn thấy hướng sáng.
4. 4Kéo cường độ tới khi phân biệt được khối với nền nhưng bóng chưa thành vệt đen, thường là quanh mức 10 tới 15 phần trăm.
5. 5Sao chép đoạn CSS rồi dán vào lớp của bạn, nhớ bổ sung kích thước và màu nền cho phần tử cha vì đoạn mã chỉ gồm background, border-radius và box-shadow.

Hai lớp bóng và luật ánh sáng một chiều

Toàn bộ hiệu ứng dựa trên một quy ước: nguồn sáng nằm ở góc trên bên trái. Vì vậy khối nổi có một bóng tối lệch xuống dưới sang phải và một bóng sáng lệch lên trên sang trái, hai bóng cùng khoảng cách và cùng độ mờ, chỉ khác dấu. Với màu nền mặc định là một xám xanh nhạt, khoảng cách 20 pixel, độ mờ 60 pixel và cường độ 15 phần trăm, đoạn mã sinh ra có dạng box-shadow 20px 20px 60px màu tối, và -20px -20px 60px màu sáng. Điểm quan trọng là quy ước hướng sáng phải giữ nguyên trên toàn bộ giao diện. Chỉ cần một khối đảo chiều bóng, mắt người sẽ đọc thành khối đó lõm xuống trong khi các khối khác nổi lên, và cả màn hình mất tính nhất quán. Đây cũng chính là cơ chế tạo kiểu Pressed: giữ nguyên hai màu bóng nhưng thêm từ khóa inset để đẩy bóng vào bên trong, khiến khối trông như bị nhấn chìm xuống dưới mặt phẳng nền.

Vì sao màu nền phải nhạt vừa, không được trắng tinh và không được quá tối

Công cụ tính hai màu bóng bằng cách lấy độ sáng của màu nền trong hệ HSL rồi cộng và trừ đi đúng giá trị cường độ. Nếu màu nền đã có độ sáng rất cao, ví dụ trắng tinh ở mức 100 phần trăm, thì màu sáng không thể sáng hơn nữa, nó bị kẹp lại đúng bằng nền và bóng sáng biến mất hoàn toàn, chỉ còn một bóng tối làm khối trông như bị đổ bóng thường chứ không phải Soft UI. Ngược lại với nền rất tối, bóng tối bị kẹp ở mức đen và hiệu ứng cũng mất một nửa. Ngay cả màu nền mặc định của phong cách này, vốn có độ sáng khoảng 90 phần trăm, khi kéo cường độ lên 15 phần trăm thì màu sáng đã chạm trần và trở thành trắng tinh, mất hết sắc màu của nền. Đó là lý do khoảng an toàn nằm ở nền có độ sáng khoảng 80 tới 92 phần trăm với cường độ khoảng 8 tới 15 phần trăm. Muốn kéo cường độ cao hơn, hãy hạ độ sáng của màu nền xuống trước.

Ba tham số hình học và cách phối chúng cho từng cỡ thành phần

Khoảng cách quyết định khối nổi cao bao nhiêu, độ mờ quyết định rìa bóng mềm tới đâu, bán kính bo góc quyết định khối trông là thẻ hay là viên thuốc. Quy tắc dùng được ngay là để độ mờ gấp khoảng ba lần khoảng cách; tỷ lệ này giữ cho bóng lan đủ rộng mà vẫn còn hướng. Độ mờ nhỏ hơn khoảng cách sẽ cho ra hai vệt cứng như bóng đổ của flat design, còn độ mờ gấp năm lần trở lên thì bóng tan gần hết và khối chìm vào nền. Về tỷ lệ với kích thước, khoảng cách nên nằm trong khoảng năm tới mười phần trăm cạnh ngắn của khối: một nút cao 48 pixel chỉ chịu được khoảng cách chừng 4 tới 6 pixel, còn một thẻ 300 pixel mới hợp với khoảng cách 15 tới 20 pixel. Dùng chung một bộ số cho cả nút nhỏ lẫn thẻ lớn là lỗi thường gặp nhất, khiến nút nhỏ trông như bị viền dày còn thẻ lớn thì phẳng lì. Với bán kính bo góc, giá trị 12 tới 24 pixel hợp cho thẻ và nút, còn giá trị bằng nửa chiều cao sẽ cho khối hình viên thuốc.

Vấn đề tiếp cận của Neumorphism và cách giảm thiệt hại

Đây là điểm yếu thật của phong cách này, không nên bỏ qua. Neumorphism cố ý để thành phần và nền cùng một màu, ranh giới chỉ được gợi ra bằng bóng rất nhạt. Tiêu chuẩn WCAG yêu cầu các thành phần giao diện có thể tương tác phải đạt tỷ lệ tương phản tối thiểu 3:1 so với vùng xung quanh, và một nút Neumorphism điển hình gần như luôn trượt yêu cầu này vì tương phản giữa nút và nền gần bằng không. Hệ quả thực tế là người có thị lực kém, người dùng màn hình bị chói nắng, hoặc người xem trên màn hình rẻ tiền sẽ không nhận ra đâu là chỗ bấm được. Nếu vẫn muốn dùng, hãy giảm thiệt hại theo mấy hướng: giữ chữ và biểu tượng bên trong nút ở mức tương phản đạt chuẩn 4,5:1 so với nền nút, thêm một viền mảnh có tương phản đủ cho các thành phần bấm được, đảm bảo trạng thái nhận tiêu điểm bàn phím có viền rõ ràng thay vì chỉ đổi bóng, và không dùng Neumorphism cho những nút quyết định như thanh toán hay xóa dữ liệu.

Đoạn CSS sinh ra thiếu gì và cần thêm gì khi dán vào dự án

Mã sinh ra gồm đúng ba dòng: background, border-radius và box-shadow. Thanh trượt kích thước chỉ ảnh hưởng khung xem trước, không được đưa vào mã, nên bạn phải tự đặt chiều rộng và chiều cao hoặc để nội dung bên trong quy định kích thước. Quan trọng hơn, hiệu ứng chỉ đúng khi phần tử cha có màu nền trùng khớp với màu bạn đã chọn trong công cụ; dán khối lên một nền trắng, một nền ảnh hoặc một nền chuyển sắc thì bóng sáng và bóng tối lập tức lộ ra thành hai vệt lạ. Cách làm gọn trong dự án thật là đặt màu nền đó thành một biến CSS dùng chung, rồi tính hai màu bóng cũng từ biến đó. Với kiểu Concave và Convex, phần background trong mã là một dải chuyển sắc theo góc 145 độ chứ không phải màu đơn, nên nếu bạn muốn giữ ảnh nền bên trong khối thì phải bỏ dòng này. Cuối cùng, bóng lớn và mờ tốn chi phí vẽ lại, hãy tránh chuyển động liên tục trên box-shadow và ưu tiên đổi giữa hai trạng thái có sẵn.

Câu hỏi thường gặp (FAQ)

Từ khóa liên quan

• neumorphism generator
• tạo hiệu ứng neumorphism
• soft ui css
• neumorphism css
• box shadow css generator
• css bóng đổ mềm
• thiết kế soft ui
• neumorphic button css
• hiệu ứng nổi chìm css
• border radius css
• inset box shadow
• chuyển hex sang hsl
• màu nền soft ui
• tương phản wcag cho nút
• neumorphism nền tối
• css shadow generator online
• hiệu ứng giao diện mềm
• tạo nút css đẹp
• soft ui design system
• neumorphism accessibility