Ngôn ngữ
English English Vietnamese (Tiếng Việt) Vietnamese (Tiếng Việt) Chinese (简体中文) Chinese (简体中文) Portuguese (Brazil) (Português do Brasil) Portuguese (Brazil) (Português do Brasil) Spanish (Español) Spanish (Español) Indonesian (Bahasa Indonesia) Indonesian (Bahasa Indonesia)

Tạo họa tiết nền liền mạch từ 29 hình mẫu với màu, kích thước, góc xoay và khoảng cách tùy chỉnh. Xuất ra PNG, SVG hoặc mã CSS.

Tạo Họa Tiết Nền Liền Mạch

Công cụ tạo họa tiết liền mạch này dựng nên các họa tiết lặp lại từ thư viện 29 hình mẫu, rồi cho bạn đổi màu và tạo hình lại đến khi chúng hợp với thiết kế của mình. Chọn một họa tiết, chỉnh màu cùng các thanh trượt và xem bản xem trước lặp lại cập nhật theo từng thay đổi.

Công cụ này dành cho lập trình viên web cần một nền CSS, nhà thiết kế đồ họa dựng các ô liền mạch cho công việc in ấn hay kỹ thuật số, và bất kỳ ai chỉ cần một họa tiết lặp lại nhanh, tùy chỉnh được. Khi đã ưng ý với kết quả, hãy xuất nó thành một ô PNG, một file SVG, hoặc mã CSS dán là dùng được ngay.

Riêng tư theo thiết kế: mọi họa tiết đều được vẽ và xuất ngay trong trình duyệt của bạn bằng Canvas API. Không có gì được tải lên máy chủ và không thu thập dữ liệu sử dụng.

Cách Dùng Công Cụ Tạo Pattern

1

Chọn một họa tiết

Duyệt thư viện họa tiết và nhấp vào ô bất kỳ để chọn. Bản xem trước cập nhật ngay lập tức để hiển thị kết quả lặp lại.

2

Tùy chỉnh màu sắc

Đặt màu Nền và màu Họa tiết bằng bộ chọn màu, hoặc nhấp vào một trong 10 bảng màu dựng sẵn. Bật Màu 2 để thêm màu thứ hai trên những họa tiết hỗ trợ, như Confetti, Hình quạt và Xương cá.

3

Điều chỉnh thông số

Tinh chỉnh diện mạo bằng các thanh trượt: Kích thước (10–100px), Xoay (0–360°), Khoảng cách (0–40px), Độ mờ (5–100%) và độ dày Nét (1–8px) cho các họa tiết dạng viền.

4

Xuất họa tiết của bạn

Chọn kích thước ô từ 100×100 đến 800×800, rồi tải xuống một ô PNG hoặc SVG, hoặc sao chép mã CSS với họa tiết được nhúng dưới dạng data URI.

Tính Năng

29 Kiểu Họa Tiết

Các hình học, hữu cơ, trừu tượng và trang trí — Chấm bi, Lưới, Chữ V, Lục giác, Lượn sóng, Vảy cá, Confetti, Xương cá, Hoa, Xoắn ốc và nhiều hơn nữa.

10 Bảng Màu Dựng Sẵn

Các bộ màu chọn một chạm: Chàm, Đại dương, Rừng cây, Hoàng hôn, Hồng phấn, Tím, Đơn sắc, Tối, Xanh mòng két và Hổ phách.

Màu Tùy Chỉnh

Đặt màu nền và màu họa tiết của riêng bạn, kèm tùy chọn màu thứ hai cho các họa tiết hai tông màu.

Tinh Chỉnh Chi Tiết

Chỉnh kích thước, góc xoay, khoảng cách, độ mờ và độ dày nét để tạo hình lại bất kỳ họa tiết nào đúng ý bạn.

Xem Trước Tức Thời

Mọi thay đổi màu và thanh trượt đều hiện ngay trên bản xem trước lặp lại — không chờ đợi, không cần tải lại.

Xuất PNG & SVG

Tải xuống ô PNG dạng raster hoặc ô SVG dạng vector co giãn được, với kích thước ô tùy chọn từ 100px đến 800px.

Sao Chép Mã CSS

Lấy mã CSS dán là dùng được với họa tiết nhúng dưới dạng data URI — thả thẳng vào file stylesheet.

Ngẫu Nhiên

Một cú nhấp tạo ra họa tiết, bảng màu và thông số ngẫu nhiên — cách nhanh để khám phá những tổ hợp bất ngờ.

Giao Diện Tối

Giao diện tối tích hợp sẵn giúp mắt dễ chịu khi làm việc trong điều kiện thiếu sáng.

Bố Cục Linh Hoạt

Hoạt động tốt trên máy tính, máy tính bảng và điện thoại để bạn thiết kế họa tiết trên mọi màn hình.

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

Họa tiết liền mạch là gì?

Họa tiết liền mạch là một ô lặp lại hoàn hảo theo mọi hướng mà không để lộ đường nối hay khe hở. Khi các ô đặt cạnh nhau, các cạnh khớp mượt mà thành một thiết kế liền lạc — lý tưởng cho nền và họa tiết bề mặt.

Làm sao tạo họa tiết nền lặp lại?

Nhấp vào một họa tiết trong thư viện, chọn màu và bảng màu, rồi chỉnh các thanh trượt kích thước, góc xoay, khoảng cách và độ mờ. Bản xem trước lặp lại thiết kế của bạn theo thời gian thực. Khi đã ưng ý, hãy xuất một ô PNG hoặc SVG, hoặc sao chép CSS để dùng làm nền lặp lại.

Có xuất được họa tiết thành SVG và PNG không?

Có. PNG là định dạng raster với độ phân giải cố định theo kích thước ô bạn chọn — rất hợp cho nền web. SVG là định dạng vector co giãn được tới mọi kích thước, phù hợp cho in ấn và khổ lớn. Cả hai đều được tải xuống dưới dạng một ô liền mạch.

Xuất CSS hoạt động thế nào?

Nút Sao chép CSS tạo ra một quy tắc background-image với họa tiết của bạn được mã hóa thành data URI, kèm các thuộc tính lặp lại và kích thước. Dán nó vào file stylesheet để dùng họa tiết làm nền lặp lại mà không cần lưu trữ một file ảnh riêng.

Tôi có chỉnh được màu, kích thước và khoảng cách không?

Có. Đặt màu nền và màu họa tiết, thêm một màu thứ hai tùy chọn, và chọn từ 10 bảng màu dựng sẵn. Các thanh trượt điều khiển kích thước (10–100px), góc xoay (0–360°), khoảng cách (0–40px), độ mờ (5–100%) và độ dày nét (1–8px) cho các họa tiết dạng viền.

Thanh trượt Nét dùng để làm gì?

Nét điều khiển độ dày đường viền cho các họa tiết dựng từ nét, như Sọc, Lưới, Lượn sóng, Vòng tròn, Vảy cá và Mũi tên. Với các họa tiết tô đặc như Chấm bi, Hình thoi và Lục giác, thiết lập nét không có tác dụng nhìn thấy được.

Họa tiết có dùng cho mục đích thương mại miễn phí không?

Có. Họa tiết được tạo hoàn toàn trong trình duyệt của bạn, nên bạn sở hữu mọi thứ mình tạo ra và có thể dùng cho bất kỳ mục đích nào, kể cả các dự án thương mại.

Kiểu họa tiết
Màu sắc
Tùy chỉnh
30px
0px
100%
2px
Xuất file
Nhấp vào một ô họa tiết để chọn, rồi chỉnh màu và thanh trượt
Bật Màu 2 cho các họa tiết hai màu như Confetti, Hình quạt và Xương cá
Dùng nút Ngẫu nhiên để khám phá những tổ hợp họa tiết thú vị
Nhấp Sao chép CSS để lấy mã nền dùng ngay cho website của bạn
Chỉnh Xoay để tạo biến thể chéo hoặc nghiêng cho mọi họa tiết
Mọi xử lý đều diễn ra trong trình duyệt — không tải dữ liệu lên máy chủ
Muốn biết thêm? Đọc tài liệu →
1/7
Bình luận 0
Để lại bình luận

Chưa có bình luận nào. Hãy là người đầu tiên!

Bắt đầu gõ để tìm kiếm...
Đang tìm kiếm...
Không tìm thấy kết quả
Hãy thử tìm với từ khóa khác