Cách dùng Tạo SVG Blob
- Nhấn Tạo blob ngẫu nhiên cho đến khi bạn ưng hình dạng.
- Dùng Độ phức tạp để tăng hoặc giảm số gợn, và Độ ngẫu nhiên để có đường viền tròn hơn hoặc hoang dã hơn.
- Chọn một màu đặc, một gradient hoặc kiểu viền.
- Tải về dưới dạng SVG (co giãn được ở mọi kích thước) hoặc PNG, hoặc sao chép mã SVG vào HTML của bạn.
Cách tạo các hình blob
Công cụ đặt các điểm quanh một đường tròn, dịch chuyển từng điểm ra vào một lượng ngẫu nhiên, rồi nối chúng bằng một đường cong kín mượt (các đoạn Bézier bậc ba đi qua mọi điểm). Càng nhiều điểm thì càng nhiều gợn; càng nhiều độ ngẫu nhiên thì đường viền càng ít tròn. Kết quả là một <path> duy nhất — nhẹ, sắc nét ở mọi kích thước và dễ đổi màu.
Dùng blob trên website
- Trang trí nền: đặt SVG ở vị trí tuyệt đối phía sau phần hero, với màu nhạt hoặc độ mờ thấp.
- Mặt nạ ảnh: dùng blob làm
mask-imagehoặc chuyển path thànhclip-path: path()để cắt ảnh theo hình dạng đó. - Hoạt ảnh: tạo hai blob có cùng độ phức tạp và chuyển đổi giữa chúng bằng CSS hoặc SMIL để có hiệu ứng “biến hình”.
Muốn hình thuần CSS thay vì SVG? Border Radius Generator tạo blob bằng 8 giá trị bo góc. Với đường phân cách giữa các phần, hãy thử SVG Wave Generator.
Cũng được tìm dưới tên: tạo blob svg, svg blob generator, blob generator, tạo hình blob, hình hữu cơ svg, random blob svg, công cụ tạo hình blob, blob maker.
Các công cụ dùng kèm tốt với Tạo SVG Blob
- Công cụ tạo CSS Clip-path — Cắt ảnh và phần tử thành hình dạng bất kỳ: chọn một trong 15 hình mẫu có sẵn như tam giác, lục giác, ngôi sao, mũi tên, chevron, bong bóng thoại, hình tròn, hình elip, hình chữ nhật bo góc… rồi kéo các điểm trên ảnh mẫu hoặc ảnh của bạn.
- Tạo CSS Gradient — Thiết kế gradient trực quan: kéo các điểm màu, đổi góc hoặc kiểu, chọn sẵn một mẫu có sẵn rồi sao chép CSS dùng được ngay, kèm màu nền đặc làm phương án dự phòng.
- Tối ưu SVG — Dọn dẹp các file SVG xuất từ Figma, Illustrator, Inkscape hoặc Sketch bằng SVGO, rồi xem trước trước/sau để chắc chắn icon vẫn hiển thị đúng.
- Chuyển SVG sang PNG — Xuất đồ họa vector SVG thành ảnh PNG sắc nét, đúng kích thước bạn cần, dùng cho app store, mạng xã hội, email hoặc tài liệu.
Câu hỏi thường gặp
Làm thế nào để tạo hình blob?
Nhấn Tạo blob ngẫu nhiên, điều chỉnh độ phức tạp và độ ngẫu nhiên, rồi tải về SVG. Mỗi blob là một path mượt duy nhất.
Tôi có thể dùng blob cho mục đích thương mại không?
Có. Các hình được tạo ngẫu nhiên ngay trên thiết bị của bạn — bạn có thể dùng trong mọi dự án, không cần ghi nguồn.
Làm sao để đặt ảnh vào trong blob?
Dùng SVG làm CSS mask (mask-image: url(blob.svg)) cho ảnh, hoặc sao chép path vào một clipPath trong SVG.
Nên dùng SVG hay PNG?
SVG cho website — luôn sắc nét ở mọi kích thước và có dung lượng rất nhỏ. PNG dành cho ứng dụng không hỗ trợ SVG, như một số công cụ làm slide hoặc mạng xã hội.
Tôi có thể cài Tạo SVG Blob như một ứng dụng web và dùng khi không có mạng không?
Có. Tạo SVG Blob là một ứng dụng web (PWA) có thể cài đặt — cài trực tiếp từ trình duyệt, không cần tải từ cửa hàng ứng dụng. Trên Chrome hoặc Edge (Windows, macOS, Linux, ChromeOS) hoặc Android, bấm Cài đặt ứng dụng ở đầu trang này; trên iPhone và iPad, dùng Chia sẻ → Thêm vào Màn hình chính; trên Mac, dùng File → Add to Dock trong Safari 17 trở lên. Sau đó ứng dụng mở trong cửa sổ riêng với biểu tượng riêng, và vì chạy hoàn toàn trên trình duyệt nên vẫn hoạt động khi không có mạng. Firefox trên máy tính không thể cài ứng dụng web. Cách cài đặt hoạt động thế nào.