Công cụ tạo họa tiết CSS
Tạo họa tiết nền thuần CSS – chấm, chấm bi, sọc, bàn cờ, lưới, zíc zắc và lưới chữ thập – với màu sắc, kích thước ô và độ dày tùy chỉnh. Không cần ảnh.
Cài đặt họa tiết
Xem trước
background-color: #ffffff; background-image: radial-gradient(#6366f1 2px, transparent 2px); background-size: 20px 20px;
Công cụ Liên quan
Xem Tất cảTạo họa tiết CSS là gì?
Tạo họa tiết nền lặp lại chỉ bằng CSS gradient, nên không cần file ảnh. Chọn họa tiết, hai màu, kích thước ô và độ dày đường hoặc chấm, rồi sao chép các khai báo background tạo ra.
Cách sử dụng Tạo họa tiết CSS
- Chọn Họa tiết: Chấm, Chấm bi, Sọc, Bàn cờ, Lưới, Zíc zắc hoặc Lưới chữ thập.
- Đặt Màu họa tiết và Màu nền.
- Chỉnh Kích thước ô và độ dày (bán kính chấm, độ rộng sọc hoặc độ dày đường) và, với sọc, chỉnh Góc.
- Kiểm tra phần xem trước.
- Sao chép mã CSS.
Ví dụ
Bàn cờ, ô 40px, họa tiết #000000 trên nền #ffffff
background-color: #ffffff; background-image: repeating-conic-gradient(#000000 0% 25%, transparent 0% 50%); background-size: 40px 40px;
Khi nào nên dùng Tạo họa tiết CSS
Dùng họa tiết CSS cho nền trang nhẹ nhàng, ảnh giữ chỗ, hiệu ứng giấy kẻ ô và các phần trang trí; chúng co giãn hoàn hảo và không tốn request HTTP nào. Với họa tiết lặp lại phức tạp hoặc mang tính minh họa, ô SVG linh hoạt hơn.
Tạo họa tiết CSS hoạt động như thế nào
Mỗi họa tiết là một background-color cộng một hoặc nhiều gradient được lặp lại bằng background-size. Chấm dùng radial-gradient(color r, transparent r); chấm bi thêm một lớp lệch thứ hai qua background-position. Sọc dùng repeating-linear-gradient với điểm dừng màu sắc nét; bàn cờ dùng repeating-conic-gradient(color 0% 25%, transparent 0% 50%); lưới kết hợp một linear gradient ngang và một dọc; zíc zắc được dựng từ bốn tam giác 45°. Độ dày bị giới hạn trong kích thước ô.
Các Trường Hợp Sử Dụng Phổ Biến
- Nền giấy kẻ ô cho trình soạn thảo và sơ đồ
- Nền banner chấm nhẹ nhàng
- Thanh cảnh báo hoặc thanh tiến trình có sọc
- Nền bàn cờ thể hiện vùng trong suốt phía sau ảnh
- Nền zíc zắc kiểu retro cho các phần trang
Câu Hỏi Thường Gặp
Các họa tiết có hoạt động trên mọi trình duyệt không?
Có với các trình duyệt hiện nay. Bàn cờ dựa vào conic gradient, được mọi trình duyệt lớn hỗ trợ từ năm 2020.
Tôi có dùng nền trong suốt được không?
Có, nhập transparent hoặc màu rgba()/oklch() có alpha làm Màu nền.
Vì sao dùng CSS thay vì ảnh?
Họa tiết CSS không phụ thuộc độ phân giải, rất nhẹ và dễ đổi màu bằng biến, không cần tải thêm file nào.