Neumorphism là gì?

Neumorphism (còn được gọi là Soft UI) là một xu hướng thiết kế hiện đại kết hợp thiết kế phẳng với bóng tinh tế để tạo các phần tử có vẻ như nổi ra khỏi hoặc lõm vào nền. Không giống như bóng truyền thống, neumorphism sử dụng hai bóng — một sáng và một tối — để mô phỏng độ sâu mềm mại, chân thực.

Trình tạo này giúp bạn tạo hiệu ứng neumorphic một cách trực quan mà không cần viết CSS bằng tay. Chọn màu cơ sở của bạn, chọn loại hình dạng, điều chỉnh các tham số bóng và sao chép mã CSS sẵn sàng cho sản xuất.

Giải Thích Các Loại Hình Dạng

Flat

Phần tử xuất hiện nâng cao trên bề mặt với màu sắc đồng nhất

Pressed

Phần tử xuất hiện bị đẩy vào bề mặt bằng cách sử dụng bóng inset

Concave

Phần tử được nâng cao với gradient cong vào trong (tâm tối hơn)

Convex

Phần tử được nâng cao với gradient cong ra ngoài (tâm sáng hơn)

Nguyên Tắc Chính: Để neumorphism hoạt động chính xác, màu nền của phần tử phải khớp với màu nền của vùng chứa cha. Điều này tạo ra ảo giác rằng phần tử là một phần của cùng một bề mặt — hoặc nổi ra khỏi nó hoặc lõm vào nó.

Table of Contents

1. Neumorphism là gì?
- 1.1. Giải Thích Các Loại Hình Dạng
2. Cách Sử Dụng
3. Tính Năng
4. Các Câu Hỏi Thường Gặp

Cách Sử Dụng

Chọn Màu Cơ Sở

Chọn màu nền của bạn bằng cách sử dụng bộ chọn màu hoặc nhập giá trị hex trực tiếp. Trình tạo tự động tính toán các màu bóng sáng và tối phù hợp. Các màu trung tính như xám hoạt động tốt nhất cho neumorphism.

Chọn Loại Hình Dạng

Chọn từ bốn loại hình dạng — Flat, Pressed, Concave hoặc Convex. Mỗi loại tạo ra một hiệu ứng độ sâu trực quan khác nhau. Sử dụng Flat cho các thẻ nâng cao và Pressed cho các trạng thái hoạt động/được nhấp chuột.

Điều Chỉnh Các Tham Số Bóng

Distance — Khoảng cách bóng mở rộng từ phần tử (0–50px)
Blur — Mức độ mềm mại của bóng (0–100px)
Intensity — Độ tương phản giữa bóng sáng và tối (0–100%)
Border Radius — Độ cong của góc (0–100px)
Size — Kích thước phần tử xem trước (80–400px)

Đặt Hướng Ánh Sáng

Chọn nơi nguồn ánh sáng ảo đến từ. Điều này xác định phía nào nhận được bóng sáng và phía nào nhận được bóng tối. Hướng trên cùng bên trái là hướng tự nhiên nhất và được sử dụng phổ biến nhất.

Sao Chép CSS

Nhấp vào nút Copy để sao chép mã CSS được tạo. Dán nó vào bảng kiểu của bạn và áp dụng nó cho phần tử HTML của bạn. Hãy nhớ đặt nền của vùng chứa cha thành cùng màu cơ sở.

Tính Năng

Điều Khiển Bóng Trực Quan

Tinh chỉnh hiệu ứng neumorphic của bạn bằng các thanh trượt trực quan cho distance, blur, intensity, border radius và kích thước phần tử.

Đầu vào số được đồng bộ hóa cho các giá trị chính xác
Cập nhật xem trước theo thời gian thực
Tạo mã CSS tức thì

Bốn Loại Hình Dạng

Tạo các hiệu ứng độ sâu khác nhau với nhiều biến thể hình dạng.

Flat (bề mặt nâng cao)
Pressed (hiệu ứng inset)
Concave (gradient vào trong)
Convex (gradient ra ngoài)

Tính Toán Màu Bóng Tự Động

Trình tạo tự động lấy các màu bóng sáng và tối từ màu cơ sở được chọn của bạn, đảm bảo bóng tự nhiên và hài hòa bất kể lựa chọn màu của bạn.

Điều Khiển Hướng Ánh Sáng

Chọn từ bốn hướng nguồn ánh sáng với điều chỉnh độ lệch bóng và góc gradient tự động.

Trên cùng bên trái (tự nhiên nhất)
Trên cùng bên phải
Dưới cùng bên trái
Dưới cùng bên phải

Xem Trước Nhiều Phần Tử

Xem trước hiệu ứng neumorphic của bạn trên các loại phần tử UI khác nhau để hình dung các ứng dụng thực tế.

Card (vùng chứa hình vuông)
Button (hình chữ nhật rộng)
Circle (nút biểu tượng)
Input (trường văn bản)

Xem Trước Nền Tối

Bật chế độ xem trước tối để xem thiết kế neumorphic của bạn trông như thế nào trên nền tối hơn. Bản xem trước tính toán lại các màu bóng trong khi giữ mã CSS gốc của bạn nguyên vẹn để xuất.

Preset Khởi Động Nhanh: Bắt đầu nhanh thiết kế của bạn với sáu preset tích hợp: Subtle, Medium, Strong, Pressed, Concave và Convex. Chọn một preset và tiếp tục tùy chỉnh bằng các thanh trượt để đạt được hiệu ứng mong muốn.

Các Câu Hỏi Thường Gặp

Tại sao hiệu ứng neumorphism của tôi không trông đúng?

Vấn đề phổ biến nhất là màu nền của phần tử không khớp với màu nền của vùng chứa cha. Neumorphism yêu cầu cả hai phải có cùng màu. Hãy chắc chắn áp dụng màu nền được tạo cho cả phần tử và cha của nó.

Những màu nào hoạt động tốt nhất cho neumorphism?

Các màu trung tính, tông màu giữa hoạt động tốt nhất — xám nhạt như #e0e0e0 hoặc các màu pastel mềm mại. Các màu rất tối hoặc rất sáng làm giảm độ tương phản giữa bóng sáng và tối, làm cho hiệu ứng kém rõ ràng hơn. Tránh trắng tinh khiết hoặc đen tinh khiết.

Sự khác biệt giữa Concave và Convex là gì?

Concave áp dụng gradient đi từ tối hơn đến sáng hơn (tạo ảo giác cong vào trong), trong khi Convex đi từ sáng hơn đến tối hơn (tạo ảo giác cong ra ngoài). Cả hai vẫn sử dụng cùng hiệu ứng bóng nâng cao như Flat.

Xem trước tối có thay đổi đầu ra CSS không?

Không. Xem trước tối chỉ dành cho trực quan hóa. Đầu ra mã CSS luôn phản ánh các cài đặt màu cơ sở gốc của bạn. Để tạo CSS cho chủ đề tối, chỉ cần thay đổi màu cơ sở thành một tông màu tối.

Neumorphism có dễ tiếp cận không?

Neumorphism tự nhiên có độ tương phản thấp hơn so với các mẫu UI truyền thống. Để thiết kế dễ tiếp cận, sử dụng nó chủ yếu cho các vùng chứa trang trí thay vì các phần tử tương tác. Đảm bảo văn bản được đặt trên các bề mặt neumorphic có độ tương phản đủ và kết hợp với các nhãn rõ ràng và đường viền cho các điều khiển tương tác.

Ghi Chú Về Khả Năng Tiếp Cận: Luôn kiểm tra tỷ lệ tương phản màu và cung cấp các tín hiệu trực quan thay thế cho các phần tử tương tác ngoài kiểu neumorphic một mình.

Tôi có thể sử dụng neumorphism với bất kỳ framework CSS nào không?

Có. Các thuộc tính CSS được tạo (background, box-shadow, border-radius) là CSS tiêu chuẩn và hoạt động với bất kỳ framework nào — Tailwind, Bootstrap hoặc CSS thuần. Chỉ cần áp dụng các thuộc tính cho phần tử của bạn.