Công cụ tạo CSS Neumorphism

Tạo Neumorphism là gì?

Tạo phong cách soft UI, nơi phần tử trông như được nổi lên khỏi (hoặc ấn vào) trang. Công cụ suy ra một màu bóng sáng hơn và một màu bóng tối hơn từ màu gốc của bạn rồi kết hợp thành hai box-shadow ngược chiều, kèm gradient tùy chọn cho bề mặt lõm và lồi.

Cách sử dụng Tạo Neumorphism

1. Nhập Màu gốc (dùng cùng màu cho nền trang của bạn).
2. Chọn Hình dạng: Phẳng, Lõm, Lồi hoặc Nhấn xuống.
3. Chọn Hướng nguồn sáng.
4. Chỉnh Khoảng cách, Độ mờ, Cường độ, Bán kính và Kích thước xem trước.
5. Sao chép mã CSS.

Ví dụ

Màu gốc #e0e0e0, phẳng, nguồn sáng từ trên trái, khoảng cách 20px, độ mờ 60px, cường độ 0.15, bán kính 50px

border-radius: 50px;
background: #e0e0e0;
box-shadow:
  20px 20px 60px #b0b0b0,
  -20px -20px 60px #ffffff;

Khi nào nên dùng Tạo Neumorphism

Dùng cho dashboard vui mắt, điều khiển ứng dụng nhà thông minh hoặc nghe nhạc và sản phẩm portfolio. Neumorphism vốn có độ tương phản thấp, nên đừng chỉ dựa vào nó cho nút hoặc ô nhập quan trọng; hãy thêm nhãn rõ ràng, icon hoặc vòng focus để đảm bảo khả năng tiếp cận.

Tạo Neumorphism hoạt động như thế nào

Màu bóng sáng và tối được tính trong OKLCH bằng cách tăng và giảm độ sáng của màu gốc theo cường độ trong khi giữ sắc độ và chroma (ánh xạ gamut về sRGB), nên cũng dùng được với màu gốc có màu và màu tối. Bóng tối lệch ra xa nguồn sáng theo khoảng cách và bóng sáng lệch về phía nguồn sáng, cả hai cùng độ mờ. Nhấn xuống dùng hai bóng inset. Lõm và lồi thêm một linear-gradient có góc theo hướng nguồn sáng, dùng các màu sáng hơn và tối hơn một phần ba cường độ.

Các Trường Hợp Sử Dụng Phổ Biến

• ✓ Nút bật/tắt và nút nhấn mềm mại
• ✓ Thẻ dashboard trên nền cùng màu
• ✓ Trạng thái nhấn xuống cho điều khiển đang hoạt động
• ✓ Giao diện máy tính bỏ túi hoặc trình phát nhạc
• ✓ Soft UI chế độ tối bằng màu gốc tối

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

Khám phá thêm danh mục