Mẫu nền CSS

Trình tạo mẫu nền CSS là một công cụ trực tuyến tạo ra các mẫu nền CSS thuần túy và liền mạch bằng cách sử dụng gradient CSS. Nó hỗ trợ năm loại mẫu: chấm, lưới, chéo, zíc zắc và sóng. Tất cả các mẫu được tạo hoàn toàn bằng CSS — không cần hình ảnh — khiến chúng nhẹ, có thể mở rộng và không phụ thuộc vào độ phân giải.

Chọn loại mẫu từ menu thả xuống, sau đó điều chỉnh màu tiền cảnh, màu nền và kích thước mẫu bằng các điều khiển. Vùng xem trước được cập nhật theo thời gian thực để bạn có thể thấy chính xác mẫu của mình trông như thế nào. Khi hài lòng, nhấp vào nút Sao chép để sao chép mã CSS đã tạo vào bảng tạm.

Có năm loại mẫu: Chấm (mẫu hình tròn lặp lại sử dụng radial-gradient), Lưới (lưới chéo sử dụng hai lớp linear-gradient), Chéo (đường chéo 45 độ sử dụng repeating-linear-gradient), Zíc zắc (mẫu zíc zắc sử dụng bốn lớp linear-gradient) và Sóng (mẫu gợn sóng sử dụng các hình tròn radial-gradient dịch chuyển).

Sử dụng bộ chọn màu tiền cảnh để đặt màu cho đường hoặc chấm của mẫu và bộ chọn màu nền cho màu cơ bản phía sau mẫu. Thanh trượt kích thước điều khiển khoảng cách lặp lại của mẫu — giá trị nhỏ hơn tạo ra các mẫu chặt hơn, mật độ cao hơn, trong khi giá trị lớn hơn tạo ra các thiết kế thưa hơn. Thử nghiệm với các kết hợp màu sắc và kích thước khác nhau.

Mã CSS đã sao chép có thể được dán trực tiếp vào bất kỳ bảng định kiểu hoặc kiểu nội tuyến nào. Áp dụng nó cho bất kỳ phần tử HTML nào bằng lớp hoặc kiểu nội tuyến. Các mẫu này phù hợp cho nền phần, điểm nhấn thẻ, vùng hero và đường phân cách trang trí. Vì chúng là CSS thuần túy, chúng không thêm yêu cầu HTTP bổ sung và mở rộng hoàn hảo trên mọi mật độ màn hình.