Trình tạo nền mẫu CSS

Hầu hết các công cụ "tạo mẫu hoa văn" thường âm thầm dùng lại cùng một công thức repeating-linear-gradient cho mọi tùy chọn và chỉ thay đổi các con số. Công cụ này thì không: mỗi kiểu trong sáu kiểu hoa văn ở đây được tạo bằng kỹ thuật CSS cụ thể thực sự tạo ra hình dạng đó. Sọc dùng một repeating-linear-gradient duy nhất với hai dải màu. Chấm bi dùng một radial-gradient được lát gạch hoàn toàn qua background-size — thủ thuật CSS cổ điển cho chấm bi — thay vì dùng repeating-radial-gradient, vốn không thể lát gạch một chấm tròn sạch sẽ trên lưới hình chữ nhật. Ca-rô ô vuông dùng công thức conic-gradient bốn góc phần tư thực thụ: một conic gradient đặt giữa một ô vuông tự nhiên chia thành bốn ô vuông góc phần tư tại các ranh giới 90 độ, và việc xen kẽ hai màu qua các góc phần tư đó lát thành một ca-rô thực sự, chứ không phải gần giống.

Lưới và chéo ô đều xếp chồng hai repeating-linear-gradient dưới dạng các mục background-image riêng biệt thay vì làm giả hướng thứ hai bằng thủ thuật border. Lưới kết hợp một repeating gradient "sang phải" và một "xuống dưới" để có các đường kẻ ngang dọc sắc nét. Chéo ô xếp chồng một repeating gradient +45deg và một -45deg để tạo kiểu đan chéo giống vải đan rổ — cần chính xác ở điểm này: đây là dạng chéo ô thực thụ, không phải hình học xương cá thực sự, và công cụ ghi nhãn như vậy thay vì phóng đại. Tam giác tận dụng lại kỹ thuật conic-gradient bốn múi của ca-rô nhưng bắt đầu gradient xoay 45 độ, điều này chuyển các ranh giới múi từ điểm giữa các cạnh ô sang các góc và biến bốn múi đó thành bốn tam giác góc-đến-góc thay vì bốn ô vuông góc phần tư.

Mỗi kiểu hoa văn chỉ hiển thị các điều khiển thực sự áp dụng cho kiểu đó — thanh trượt góc hiện ra với sọc, bán kính chấm và khoảng cách hiện ra với chấm bi, độ dày đường kẻ hiện ra với lưới và chéo ô — và khung xem trước dạng ô lớn vẽ lại theo mỗi thay đổi để bạn có thể thấy vài lần lặp đầy đủ trước khi chốt giá trị. Chuyển chế độ đầu ra sang SVG và cùng mẫu hoa văn đó xuất hiện lại dưới dạng phần tử <pattern> được dựng từ các primitive rect, circle, path hoặc polygon, sẵn sàng để dán vào <defs> của bất kỳ tài liệu SVG nào, kèm theo nút tải một cú nhấp cho file .svg độc lập.

Mọi thứ chạy cục bộ trong trình duyệt của bạn: không tải ảnh lên, không vòng gửi server, không cần tài khoản. Đối với tô màu thuần hoặc gradient không lặp lại, công cụ tạo CSS gradient trên trang này mới là công cụ phù hợp; công cụ này dành riêng cho nền hình học có thể lát gạch được tạo từ không tài nguyên ảnh nào.