Trình tạo Neumorphism CSS

Trình tạo Neumorphism CSS là gì?

Trình tạo Neumorphism CSS là một công cụ trực quan miễn phí để tạo giao diện soft-UI (neumorphism), trong đó các phần tử trông như nhô lên khỏi bề mặt hoặc bị ấn lõm vào nhờ hai bóng đổ lệch cùng tông màu. Nó được tạo ra cho các nhà thiết kế giao diện và lập trình viên front-end muốn có độ sâu tinh tế, có cảm giác chạm được mà không phải tinh chỉnh thủ công các cặp box-shadow. Đặt màu nền bằng bộ chọn hoặc trường thập lục phân, chuyển Hình dạng giữa Phẳng, Lõm và Lồi, rồi điều chỉnh Khoảng cách (bóng lệch ra bao xa), Cường độ (độ mạnh của tương phản sáng/tối), Độ mờ (độ mềm) và Bán kính (bo tròn góc). Công cụ suy ra một điểm sáng nhạt hơn và một bóng đậm hơn từ màu nền của bạn và kết hợp chúng — tùy chọn phủ thêm một dải chuyển màu tinh tế cho hình lõm và lồi — thành một quy tắc CSS duy nhất, hiển thị trực tiếp trên nền tương xứng và xuất ra dưới dạng mã có thể sao chép.

Cách sử dụng Trình tạo Neumorphism CSS

1. Chọn màu nền của bề mặt bằng ô màu mẫu hoặc bằng cách nhập một giá trị thập lục phân như #e0e5ec.
2. Chọn một Hình dạng: Phẳng cho bảng nổi, Lõm cho phần lõm bị ấn xuống, hoặc Lồi cho khối phồng vòm.
3. Đặt Khoảng cách để đẩy bóng sáng và tối ra xa hơn nhằm tạo độ nhô sâu hơn.
4. Điều chỉnh Cường độ để làm tương phản sáng/bóng mạnh hơn hoặc tinh tế hơn.
5. Tinh chỉnh Độ mờ cho cạnh mềm hơn hoặc sắc hơn và Bán kính để bo tròn các góc.
6. Kiểm tra bản xem trước trực tiếp, sau đó sao chép CSS neumorphism đã tạo vào bảng định kiểu của bạn.

Ví dụ

màu #e0e5ec, hình dạng Phẳng, khoảng cách 12, cường độ 15, độ mờ 24, bán kính 20

border-radius: 20px;
background: #e0e5ec;
box-shadow: 12px 12px 24px #bec3c9, -12px -12px 24px #e5e9ef;

màu #e0e5ec, hình dạng Lõm, khoảng cách 8, cường độ 15, độ mờ 16, bán kính 16

border-radius: 16px;
background: linear-gradient(145deg, #d0d5db, #e2e7ed);
box-shadow: 8px 8px 16px #bec3c9, -8px -8px 16px #e5e9ef;

màu #3a3f47, hình dạng Lồi, khoảng cách 6, cường độ 20, độ mờ 12, bán kính 12

border-radius: 12px;
background: linear-gradient(145deg, #484c54, #363b42);
box-shadow: 6px 6px 12px #2e3239, -6px -6px 12px #61656c;

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

Neumorphism là gì?

Neumorphism (hay soft UI) là một phong cách trong đó các phần tử trông như nhô lên khỏi một bề mặt đơn sắc hoặc bị ấn lõm vào, sử dụng hai box-shadow lệch cùng tông màu — một bóng sáng hơn ở trên bên trái và một bóng đậm hơn ở dưới bên phải. Công cụ này suy ra cả hai bóng từ màu nền của bạn nên chúng luôn ăn khớp với bề mặt.

Sự khác biệt giữa Phẳng, Lõm và Lồi là gì?

Phẳng giữ bề mặt ở một màu đặc duy nhất nên phần tử trông nổi lên trên nền. Lõm thêm một dải chuyển màu tinh tế tối dần về phía trên bên trái, khiến nó trông như bị khoét lõm vào trong. Lồi đảo ngược dải chuyển màu để phần giữa trông vòm lên và nhô cao. Bóng sáng và tối giữ nguyên; chỉ có phần tô bề mặt thay đổi.

Khoảng cách, Cường độ, Độ mờ và Bán kính hoạt động ra sao?

Khoảng cách là độ lệch tính bằng pixel của cả hai bóng — giá trị càng lớn càng đẩy phần tử ra xa bề mặt hơn. Cường độ kiểm soát hai màu bóng sáng hơn và đậm hơn bao nhiêu so với màu nền. Độ mờ làm mềm các cạnh bóng, còn Bán kính bo tròn các góc. CSS cập nhật trực tiếp khi bạn thay đổi bất kỳ giá trị nào trong số đó.

Tôi nên dùng màu nào cho nền?

Neumorphism chỉ hiển thị đúng khi phần tử nằm trên một bề mặt cùng màu nền — hãy áp dụng cùng màu đó cho phần tử cha hoặc nền trang. Bản xem trước dùng màu nền của bạn làm phông nền để bạn có thể đánh giá hiệu ứng chính xác trước khi sao chép.

Dữ liệu của tôi có được tải lên đâu không?

Không. Trình tạo chạy hoàn toàn trong trình duyệt của bạn bằng JavaScript — màu sắc và thiết lập của bạn không bao giờ được gửi đến máy chủ, nên nó hoạt động riêng tư và thậm chí ngoại tuyến sau khi trang đã tải xong.