Thiết kế / CSS

Trình tạo mẫu CSS (Sọc, Chấm, Lưới, Ô bàn cờ)

Tạo các mẫu nền lặp lại chỉ bằng gradient CSS: sọc, sọc chéo, đường lưới, chấm bi, ô bàn cờ và đường zíc zắc, với hai màu, kích thước cùng độ rộng đường do bạn chọn, rồi sao chép CSS.

Trình tạo mẫu CSS (Sọc, Chấm, Lưới, Ô bàn cờ): Mỗi mẫu gồm một hoặc hai gradient CSS lặp lại theo kích thước bạn chọn: repeating-linear-gradient cho sọc, hai gradient tuyến tính giao nhau cho lưới, radial-gradient cho chấm và repeating-conic-gradient cho ô bàn cờ. Không có tệp hình ảnh, nên mẫu vẫn sắc nét ở mọi mức thu phóng và không tốn dữ liệu tải. Chạy 100% cục bộ trong trình duyệt của bạn, không có tệp nào được tải lên máy chủ.

Danh mục
Công cụ lập trình viên
Lượt chạy
Trong trình duyệt của bạn
Chi phí
Miễn phí · không cần đăng ký
Trạng thái khả dụng
Sẵn sàng sử dụng
Trình tạo họa tiết CSSXử lý cục bộ

Chạy hoàn toàn trong trình duyệt của bạn

CSS

.pattern {
  background-color: #f2faed;
  background-image: repeating-linear-gradient(45deg, #63c42d 0 6px, transparent 6px 24px);
}

Mỗi họa tiết chỉ được vẽ bằng các dải chuyển màu CSS, nên không có hình ảnh để tải xuống, vẫn sắc nét ở mọi mức thu phóng và có thể thay đổi màu sắc trong biểu định kiểu. Hãy giữ họa tiết phía sau văn bản ở mức nhẹ: độ tương phản thấp giữa hai màu giúp văn bản dễ đọc.

Cách vẽ bàn cờ

repeating-conic-gradient(#000 0 25%, transparent 0 50%) tô phần tư thứ nhất và thứ ba của một vòng quay quanh tâm mỗi ô, tạo ra hai hình vuông chéo trên mỗi ô; background-size đặt kích thước ô bằng hai lần kích thước hình vuông.

Kết hợp các mẫu

Các ảnh nền được xếp chồng: liệt kê một gradient từ trình tạo gradient CSS sau một mẫu, ngăn cách bằng dấu phẩy, để mẫu nằm trên gradient.

Cách sử dụng

  1. Chọn một mẫu.
  2. Chọn hai màu, kích thước lặp lại và độ rộng đường hoặc kích thước chấm.
  3. Sao chép CSS.

Quyền riêng tư và giới hạn

Mọi thứ đều chạy trong trình duyệt của bạn.

Công cụ liên quan

Gradient CSSSóng SVGGlassmorphism

Câu hỏi thường gặp

Các mẫu có hoạt động trên mọi trình duyệt không?

Có: mọi trình duyệt hiện tại đều hỗ trợ các gradient này, bao gồm cả conic gradient được dùng cho ô bàn cờ.

Làm cách nào để đặt mẫu phía sau văn bản?

Hãy chọn hai màu gần nhau để mẫu không quá nổi bật và văn bản vẫn có đủ độ tương phản.

Tôi có thể thay đổi góc của các sọc không?

Có: hãy chỉnh góc trong repeating-linear-gradient của CSS đã sao chép, chẳng hạn dùng 60deg thay cho 45deg.

Công cụ miễn phí · trong trình duyệt của bạn lượt chạy · không cần tài khoản