Tạo Neumorphism CSS cho hiệu ứng bóng đổ Soft UI
Công cụ tạo neumorphism CSS này dựng hiệu ứng bóng đổ Soft UI một cách trực quan, nên bạn không phải viết tay hai lớp box-shadow. Chọn màu nền, chọn kiểu hình khối, kéo vài thanh trượt và sao chép CSS dùng được ngay cho sản phẩm. Công cụ dành cho nhà thiết kế và lập trình viên front-end muốn dựng thẻ, nút bấm và ô nhập theo phong cách neumorphic mà không phải dò mã thủ công.
Neumorphism (còn gọi là Soft UI) kết hợp hai lớp bóng — một sáng, một tối — để phần tử trông như nhô lên khỏi hoặc lún vào cùng một bề mặt. Công cụ tự suy ra hai màu bóng tương ứng từ màu nền của bạn, rồi hiển thị xem trước trực tiếp và mã CSS chính xác ngay khi bạn tinh chỉnh.
Cách dùng công cụ tạo Neumorphism
Chọn màu nền
Đặt nền bằng bảng chọn màu hoặc gõ giá trị hex. Các tông sáng, trung tính như xám hoạt động tốt nhất vì còn đủ khoảng cho cả bóng sáng lẫn bóng tối.
Chọn kiểu hình khối
Chuyển giữa Flat, Pressed, Concave và Convex. Dùng Flat cho thẻ nổi và Pressed cho trạng thái đang chọn hoặc đang nhấn.
Tinh chỉnh bóng đổ
Điều chỉnh Khoảng cách (0–50px), Độ mờ (0–100px), Cường độ (0–100%), Bo góc (0–100px) và Kích thước xem trước (80–400px). Mỗi thanh trượt có một ô nhập số đi kèm để đặt giá trị chính xác.
Đặt hướng sáng
Chọn nơi nguồn sáng ảo chiếu tới — Trên trái, Trên phải, Dưới trái hoặc Dưới phải. Điều này quyết định bên nào nhận bóng sáng và bên nào nhận bóng tối. Trên trái là tự nhiên nhất.
Sao chép CSS
Bấm Sao chép CSS và dán phần xuất ra vào tệp style của bạn. Nhớ đặt cùng màu nền cho khung chứa cha để ảo giác neumorphic giữ được.
Tính năng
Màu nền với bóng tự động
Chọn màu nền bằng bảng chọn màu hoặc nhập hex, màu bóng sáng và bóng tối được suy ra tự động cho kết quả tự nhiên, hài hòa.
Bốn kiểu hình khối
Tạo hiệu ứng Flat (nổi lên), Pressed (lún vào), Concave (gradient hướng vào) và Convex (gradient hướng ra), chuyển đổi tức thì để so sánh.
Tinh chỉnh bóng chính xác
Tinh chỉnh khoảng cách, độ mờ và cường độ bằng các thanh trượt, mỗi thanh có một ô nhập số đồng bộ để đặt giá trị chính xác.
Điều chỉnh bo góc & kích thước
Đặt độ bo góc tới 100px và đổi kích thước phần tử xem trước từ 80 đến 400px để xem hiệu ứng ở đúng tỷ lệ bạn cần.
Điều khiển hướng sáng
Chọn một trong bốn hướng nguồn sáng; độ lệch bóng và góc gradient tự điều chỉnh cho khớp.
Nhiều phần tử xem trước
Xem trước hiệu ứng trên Thẻ, Nút bấm, Hình tròn hoặc Ô nhập để thấy nó hiển thị ra sao trong các ngữ cảnh giao diện khác nhau.
Xem trước trên nền tối
Bật Xem nền tối để kiểm tra thiết kế trên bề mặt tối hơn; phần hiển thị được tính lại trong khi mã CSS xuất ra vẫn giữ nguyên màu gốc của bạn.
Sáu mẫu dựng sẵn để bắt đầu nhanh
Bắt đầu từ Nhẹ, Vừa, Mạnh, Pressed, Concave hoặc Convex, rồi tinh chỉnh bằng thanh trượt.
CSS trực tiếp & sao chép một chạm
Mã CSS background và box-shadow tạo ra cập nhật theo thời gian thực, sẵn sàng sao chép chỉ với một cú bấm.
Câu hỏi thường gặp
Neumorphism (Soft UI) là gì?
Neumorphism, hay Soft UI, là một phong cách thiết kế kết hợp bề mặt phẳng với hai lớp bóng tinh tế để phần tử trông như nhô lên khỏi hoặc lún vào cùng một nền. Nó dùng một bóng sáng và một bóng tối để mô phỏng chiều sâu mềm mại, chân thực.
Vì sao công cụ dùng hai lớp box-shadow (sáng + tối)?
Một lớp bóng đơn chỉ làm tối một bên. Neumorphism cần một bóng sáng ở phía hướng về nguồn sáng và một bóng tối ở phía đối diện, để phần tử trông như nhô lên khỏi bề mặt. Công cụ xuất cả hai lớp bóng trong một khai báo box-shadow sẵn cho bạn.
Vì sao hiệu ứng neumorphism của tôi trông không đúng?
Nguyên nhân phổ biến nhất là màu nền của phần tử và của khung chứa cha không khớp nhau. Neumorphism đòi hỏi cả hai phải cùng màu, nên hãy áp màu nền tạo ra cho cả phần tử lẫn khung chứa cha của nó.
Màu nào hợp nhất cho neumorphism?
Màu trung tính, tông trung bình hợp nhất — các sắc xám sáng như #e0e0e0 hoặc pastel dịu. Màu quá tối hoặc quá sáng làm thu hẹp độ tương phản giữa bóng sáng và bóng tối, khiến hiệu ứng khó nhìn, nên tránh trắng tinh và đen tuyền.
Làm sao tạo hiệu ứng neumorphic nhấn (inset)?
Chọn kiểu hình khối Pressed. Nó chuyển box-shadow sang inset, nên phần tử trông như bị nhấn lún vào bề mặt — hoàn hảo cho trạng thái đang chọn, đang focus hay đang nhấn. Mẫu Pressed cho bạn một điểm khởi đầu sẵn có.
Concave và Convex khác nhau thế nào?
Concave thêm một gradient chuyển từ tối sang sáng tạo ảo giác đường cong lõm vào, còn Convex chuyển từ sáng sang tối tạo ảo giác đường cong lồi ra. Cả hai giữ cùng kiểu bóng đôi nhô lên như Flat.
Xem nền tối có làm đổi mã CSS xuất ra không?
Không. Xem nền tối chỉ để hình dung — mã CSS tạo ra luôn phản ánh màu nền gốc của bạn. Để tạo CSS cho giao diện tối, hãy đổi chính màu nền sang một sắc tối.
Neumorphism khác glassmorphism và skeuomorphism thế nào?
Neumorphism dùng hai lớp bóng khớp nhau trên một bề mặt phẳng đơn để tạo chiều sâu mềm mại. Glassmorphism dựa vào làm mờ nền và độ trong suốt cho vẻ kính mờ, còn skeuomorphism mô phỏng kết cấu và chất liệu thực tế. Neumorphism là điểm trung gian tối giản, đơn sắc.
Neumorphism có thân thiện với accessibility không?
Neumorphism vốn có độ tương phản thấp, nên hãy dùng nó chủ yếu cho khung trang trí hơn là các nút điều khiển tương tác quan trọng. Giữ chữ trên bề mặt neumorphic ở tỷ lệ tương phản đủ, và bổ trợ nút bấm cùng ô nhập bằng nhãn rõ ràng, kiểu focus và viền.
Tôi có dùng được CSS này với mọi framework không?
Có. Phần xuất ra dùng các thuộc tính chuẩn background, box-shadow và border-radius vốn hoạt động với Tailwind, Bootstrap hay CSS thuần — chỉ cần áp chúng vào phần tử của bạn.
Chưa có bình luận nào. Hãy là người đầu tiên!