Trình Tạo Họa Tiết Nền CSS

Công Cụ Này Là Gì?

CSS có thể vẽ các họa tiết lặp lại mà không cần bất kỳ file hình ảnh nào bằng cách dùng gradient — radial-gradient() và linear-gradient() — làm background-image, kết hợp với background-size nhỏ hơn phần tử để gradient được lát và lặp lại. Chấm bi dùng repeating radial-gradient, sọc và ô cờ dùng linear-gradient() lặp lại hoặc xếp lớp, và đường lưới dùng hai đường linear-gradient() chồng lên nhau.

Công cụ này tạo các khai báo gradient đó cho bạn. Chọn loại họa tiết, điều chỉnh màu họa tiết, màu nền và khoảng cách, rồi xem khung xem trước trực tiếp cập nhật — sau đó sao chép chính xác mã CSS background-image và background-size.

Nguồn: CSS Images Module Level 3, W3C — định nghĩa repeating-linear-gradient() và repeating-radial-gradient(), các hàm mà những họa tiết này được xây dựng dựa trên đó.

Tại Sao Nên Dùng?

• Không có file hình ảnh, không có yêu cầu HTTP — họa tiết hoàn toàn là CSS và hiển thị tức thì ở bất kỳ độ phân giải nào, kể cả màn hình retina/DPI cao.
• Có thể tùy chỉnh hoàn toàn màu sắc và khoảng cách mà không cần tự viết cú pháp gradient hay tính toán bài toán lát nền.
• Khung xem trước trực tiếp hiển thị chính xác họa tiết lặp lại trước khi bạn sao chép bất cứ điều gì.
• Co giãn gọn gàng vì đây là toán học vector, không phải hình ảnh raster — không bị mờ khi phần tử thay đổi kích thước.
• Chạy hoàn toàn trong trình duyệt của bạn — không có gì bạn cấu hình được tải lên bất cứ đâu.
• Miễn phí, không cần đăng ký, hoạt động tốt trên điện thoại.

Cách Sử Dụng

1. Chọn loại họa tiết: chấm bi, sọc chéo, ô cờ, hoặc đường lưới.
2. Chọn màu họa tiết và màu nền hiển thị giữa/phía sau các hình dạng của họa tiết.
3. Điều chỉnh thanh trượt kích thước để làm chấm, sọc hoặc ô lưới lớn hơn hoặc nhỏ hơn — điều này cũng kiểm soát mức độ dày đặc mà họa tiết lặp lại.
4. Sao chép mã CSS được tạo ra và dán vào làm background-image (và background-size/background-position nếu có) của bất kỳ phần tử nào.

Ví dụ

Đầu vào

Họa tiết: chấm bi · Màu: xanh dương · Nền: trắng · Kích thước: 24px

Đầu ra

background-color: #ffffff;
background-image: radial-gradient(rgba(59, 130, 246, 1) 3px, transparent 3px);
background-size: 24px 24px;
background-position: 0 0;

Một họa tiết chấm bi sáng cổ điển, thường được dùng làm nền phần tinh tế hoặc kết cấu thẻ.

Cách mỗi họa tiết được tạo ra

• Chấm bi: một radial-gradient() vẽ một vòng tròn nhỏ được tô đầy, sau đó background-size khiến nó lặp lại thành lưới chấm được lát.
• Sọc chéo: một repeating-linear-gradient() ở góc 45 độ luân phiên giữa màu họa tiết và màu nền theo khoảng cách cố định.
• Ô cờ: hai lớp linear-gradient() 45 độ chồng lên nhau, lệch nhau nửa ô lát, tạo ra các ô vuông sáng/tối luân phiên.
• Đường lưới: hai đường linear-gradient() mỏng — một ngang, một dọc — được lát theo khoảng cách đã chọn để tạo thành lưới, tương tự giấy kẻ ô ly.

Khi nào nên dùng họa tiết CSS thay vì file hình ảnh

Một họa tiết gradient CSS không có dung lượng file và không cần yêu cầu HTTP, nên tải tức thì và không bao giờ trông mờ trên màn hình DPI cao, khác với một ô nền PNG dạng raster. Nó lý tưởng cho các kết cấu tinh tế phía sau văn bản, đường phân cách phần, minh họa trạng thái trống, hoặc thẻ giữ chỗ. Đối với các họa tiết minh họa hoặc ảnh chụp phức tạp, một hình ảnh thực sự vẫn là công cụ phù hợp — gradient CSS phù hợp nhất với các hình dạng đơn giản, hình học, lặp lại như ở đây.

Kết hợp với các hiệu ứng CSS khác

Họa tiết hoạt động tốt như nền phía sau các thẻ glassmorphism, vì độ mờ cần có thứ gì đó với kết cấu hình ảnh phía sau để hiển thị rõ. Chúng cũng kết hợp tự nhiên với các góc bo tròn trên phần tử container.

→ Trình Tạo Glassmorphism CSS · Trình Tạo Border Radius

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