Mesh gradient với CSS và SVG
Chọn từ 2 đến 8 màu, công cụ này sẽ hòa chúng thành một nền mềm mại, mượt mà, bạn có thể tạo hình bằng cách kéo các điểm màu. Sao chép CSS cho bạn mã CSS chạy trên mọi trình duyệt hiện đại, còn Tải SVG xuống cho bạn một tệp 1600 × 1200 có thể phóng to thu nhỏ tùy ý. Mọi thứ chạy ngay trong trình duyệt của bạn, không cần WebGL, không tải tệp lên và không cần tài khoản.
Tạo gradient màu bằng mesh gradient generator
- Nhìn vào phần xem trước. Những chấm tròn nhỏ trên đó là các điểm màu, mỗi điểm ứng với một mảng màu của mesh.
- Nhấn Ngẫu nhiên để có bảng màu và cách bố trí mới ngẫu nhiên, bao nhiêu lần tùy bạn, cho đến khi có kết quả gần với ý muốn.
- Mở hàng Màu sắc và nhấp vào một ô màu để chọn màu của riêng bạn. Thêm màu giúp thêm màu (tối đa 8), còn dấu x nhỏ trên ô màu sẽ xóa màu đó (tối thiểu 2).
- Di chuyển thanh trượt Độ phức tạp, từ 2 đến 6, để đổi số điểm màu của mesh.
- Kéo một chấm để di chuyển nó, bằng chuột hoặc bằng ngón tay. Với bàn phím, hãy chọn một chấm rồi nhấn phím mũi tên; giữ Shift để nhảy các bước lớn hơn.
- Nhấn Sao chép CSS hoặc Tải SVG xuống khi bản xem trước đã ổn. Thông báo ngắn Đã sao chép hoặc Đã lưu sẽ xác nhận việc đó.
Phần xem trước cập nhật mỗi khi bạn thay đổi, và ô Mã CSS luôn hiện đúng CSS của những gì bạn đang thấy. Đổi độ phức tạp hoặc nhấn "Ngẫu nhiên" sẽ bố trí lại các điểm, nên những chấm bạn đã kéo sẽ về vị trí mới.
Độ phức tạp làm gì
Độ phức tạp tạo một lưới gồm độ phức tạp × độ phức tạp điểm màu, và mỗi điểm nhận một màu từ bảng màu của bạn. Nhiều điểm hơn cho mesh đa dạng hơn với các mảng nhỏ hơn; ít điểm hơn cho các mảng màu rộng và đơn giản.
- Độ phức tạp 2: 4 điểm màu, mỗi mảng chiếm 65% khung vẽ
- Độ phức tạp 3: 9 điểm, 43%
- Độ phức tạp 4: 16 điểm, 33%
- Độ phức tạp 5: 25 điểm, 26%
- Độ phức tạp 6: 36 điểm, 22%
Có một điều cần lưu ý: các màu được chia cho từng điểm, nên bảng màu có thể có nhiều màu hơn số điểm của mesh. Với độ phức tạp 2 chỉ có 4 điểm, vì vậy bảng màu 6 màu chỉ hiện tối đa 4 màu cùng lúc. Hãy tăng độ phức tạp để những màu còn lại xuất hiện.
Mesh gradient CSS có thể dán ngay
Ô Mã CSS chứa hai khai báo: một background-color (màu trung bình của bảng màu, để không góc nào bị trống) và một background-image xếp chồng một radial-gradient() cho mỗi điểm màu. Đây là CSS thông thường, không cần tệp ảnh hay đoạn mã script.
Mỗi lớp mờ dần từ màu đặc ở tâm đến hoàn toàn trong suốt ở mép, và các lớp chồng lên nhau, nhờ đó màu hòa vào nhau. Kích thước và vị trí tính bằng phần trăm, nên gradient co giãn vừa với phần tử mà bạn áp dụng.
Mesh gradient SVG và cách lưu
Tải SVG xuống lưu tệp gradient-mesh.svg. Tệp có viewBox 1600 × 1200, một hình chữ nhật nền cùng màu trung bình và một radialGradient cho mỗi điểm màu. Vì là ảnh vector nên nó vẫn sắc nét khi dùng làm hình nền điện thoại, nền slide hoặc ảnh bài đăng mạng xã hội. Trong khung không phải 4:3, ảnh lấp đầy khung và cắt bớt phần mép thay vì bị kéo giãn.
Nếu cần PNG, hãy mở SVG bằng trình duyệt hoặc trình chỉnh sửa đọc được SVG rồi xuất ở kích thước bạn muốn.
Dùng mesh gradient làm nền
- Trang web hoặc khu vực hero: dán CSS vào quy tắc của phần tử đó. Chữ đặt trên hỗn hợp màu rối mắt có thể khó đọc, nên hãy thử bằng công cụ Kiểm tra độ tương phản màu.
- Slide, hình nền và bài đăng: tải SVG xuống rồi đặt hoặc xuất từ ứng dụng thiết kế của bạn.
- Khớp với thương hiệu: nhấp vào một ô màu và chọn màu của bạn. Công cụ Mã màu từ hình ảnh có thể lấy trước một màu từ ảnh hoặc logo.
Cả hai kết quả đều là bản chụp nhanh của phần xem trước hiện tại. Nếu bạn trộn ngẫu nhiên lần nữa, hãy sao chép hoặc lưu lại để lấy bản mới.
Câu hỏi thường gặp
Có mesh gradient generator nào cho mã CSS không?
Có, chính là công cụ này. Ô "Mã CSS" hiện một background-color cùng một background-image gồm các lớp radial-gradient() xếp chồng, mỗi điểm màu một lớp. Đây là CSS chuẩn, không cần JavaScript hay tệp ảnh, nên chạy trên mọi trình duyệt hiện đại. Nhấn "Sao chép CSS" rồi dán vào stylesheet hoặc thuộc tính style.
Tôi có thể lưu mesh gradient dưới dạng SVG không?
Có. "Tải SVG xuống" lưu một tệp có viewBox 1600 × 1200. Tệp được dựng từ các lớp radialGradient nên giữ độ sắc nét ở mọi kích thước. Trong khung không phải 4:3, ảnh lấp đầy khung và cắt bớt phần mép thay vì bị kéo giãn.
Làm sao dùng mesh gradient online này cho nền trang web?
Hãy sao chép CSS và dán hai khai báo vào quy tắc của phần tử bạn muốn tô màu, chẳng hạn khu vực hero hoặc body. Các mảng màu được đặt theo phần trăm nên co giãn cùng phần tử. Hãy kiểm tra xem chữ của bạn có còn dễ đọc trên các màu đã chọn không.
Tôi có thể lấy mesh gradient dưới dạng PNG không?
Không trực tiếp: công cụ này xuất CSS và SVG, không xuất PNG. Hãy mở SVG đã tải bằng trình duyệt hoặc trình chỉnh sửa đọc được SVG, rồi xuất hoặc chụp màn hình ở kích thước pixel bạn cần.
Tôi có thể làm mesh gradient chuyển động không?
Không. Công cụ chỉ tạo một gradient tĩnh: bạn có thể kéo điểm và đổi màu, nhưng CSS và SVG xuất ra không chuyển động.
Cái này có giống mesh gradient Illustrator không?
Không. Gradient mesh của Illustrator là một lưới các mảng vector có thể chỉnh sửa. Công cụ này hòa các gradient hướng tâm mềm chồng lên nhau, mỗi điểm màu một lớp, cho cảm giác mượt và nhiều màu tương tự, nhưng xuất ra CSS hoặc SVG đơn giản.
Tôi có dùng được kết quả trong Figma không?
Bạn có thể tải SVG xuống rồi đưa vào ứng dụng thiết kế đọc được SVG, trong đó có Figma, để dùng làm nền. Công cụ không tự tạo mesh gradient bên trong Figma.
