Trình tạo Neumorphism
Thiết kế bề mặt giao diện neumorphic mềm mại, nổi khối với bóng kép và sao chép CSS.
—
Màu nền của canvas khớp với màu phần tử — chính điều đó tạo nên hiệu ứng neumorphic mềm mại, nổi khối.
Mặc định, bóng sáng và bóng tối được suy ra từ màu cơ sở. Bật để tự thiết lập chúng.
Giới thiệu về Trình tạo Neumorphism
Neumorphism Generator thiết kế vẻ ngoài "soft UI" mềm mại, nổi khối: một phần tử trông như được đẩy lồi ra — hoặc lõm vào — bề mặt phía sau nó. Chọn một màu nền tảng và công cụ sẽ tự suy ra mọi thứ còn lại, bởi hiệu ứng này chỉ hoạt động khi phần tử và nền của nó dùng chung một màu, còn chiều sâu hoàn toàn đến từ hai box-shadow đối lập nhau.
Các thanh trượt điều khiển hình học: kích thước, bán kính bo góc, khoảng cách của bóng đổ, cường độ và độ mờ của chúng. Bốn chế độ hình dạng — flat, concave, convex và pressed — hoán đổi gradient nội bộ và hướng bóng đổ, còn bộ chọn nguồn sáng di chuyển điểm sáng đến bất kỳ góc nào trong bốn góc để phần tử khớp với ánh sáng của thiết kế của bạn.
Mặc định, màu bóng sáng và bóng tối được tính toán từ màu nền tảng, nhưng chế độ thủ công cho phép bạn tự thiết lập cả hai. CSS được sinh ra — background, radius và cặp box-shadow — chỉ cách một cú click.
Cách sử dụng Trình tạo Neumorphism
- Chọn màu nền tảng — nó được áp dụng cho cả phần tử lẫn khung nền phía sau.
- Chọn một hình dạng: flat, concave, convex hoặc pressed.
- Đặt góc nguồn sáng để kiểm soát điểm sáng rơi ở đâu.
- Tinh chỉnh kích thước, bán kính bo góc, khoảng cách, cường độ và độ mờ bằng các thanh trượt.
- Bật màu bóng đổ thủ công nếu bạn muốn ghi đè các tông sáng/tối được suy ra tự động.
- Sao chép CSS và dán vào phần tử của bạn.