Công cụ tạo Mesh Gradient

Tạo Mesh Gradient là gì?

Tạo hiệu ứng "mesh gradient" mềm mại phổ biến bằng CSS thuần: một màu nền cộng với nhiều radial gradient, mỗi gradient bắt đầu từ một điểm màu và mờ dần thành trong suốt. Bạn đặt tối đa tám điểm bằng cách kéo chúng trong phần xem trước hoặc gõ vị trí.

Cách sử dụng Tạo Mesh Gradient

1. Chọn Màu nền.
2. Chọn một điểm màu và đặt Màu, Độ lan và Vị trí X / Vị trí Y của nó, hoặc kéo điểm trong phần xem trước.
3. Dùng Thêm điểm / Xóa điểm để đổi số màu được pha (1–8).
4. Bấm Ngẫu nhiên để có mesh mới, hoặc nhập Seed rồi bấm Áp dụng seed để có kết quả tái lập được.
5. Sao chép mã CSS.

Ví dụ

Mặc định 4 điểm, nền #ff99cc

background-color: #ff99cc;
background-image:
  radial-gradient(at 0% 0%, #ffb3ba 0, transparent 50%),
  radial-gradient(at 100% 0%, #bae1ff 0, transparent 50%),
  radial-gradient(at 100% 100%, #baffc9 0, transparent 50%),
  radial-gradient(at 0% 100%, #ffffba 0, transparent 50%);

Khi nào nên dùng Tạo Mesh Gradient

Dùng cho nền banner, landing page, màn hình chờ của ứng dụng và phông nền màu mờ phía sau thẻ glassmorphism. Nếu cần chuyển màu thẳng chính xác, hãy dùng công cụ tạo CSS Gradient; để biến dạng mesh thật, bạn cần công cụ vector hoặc shader canvas/WebGL.

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

Mỗi điểm trở thành radial-gradient(at x% y%, color 0, transparent spread%) và tất cả được liệt kê trong background-image phía trên background-color. Vì mọi gradient đều mờ dần thành trong suốt, các màu chồng lên nhau và pha trộn mượt mà. Chế độ Ngẫu nhiên dùng bộ sinh số giả ngẫu nhiên có seed (mulberry32): cùng seed và cùng số điểm luôn cho cùng màu và vị trí. Đây là cách xấp xỉ mesh gradient thật (CSS không có), không phải lưới patch song tuyến.

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

• ✓ Nền banner cho landing page
• ✓ Phông nền cho thẻ glassmorphism
• ✓ Ảnh giữ chỗ nhiều màu cho ảnh bìa blog
• ✓ Màn hình giới thiệu ứng dụng
• ✓ Nền tái lập được qua seed trong design system

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

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