UTILS.
เป็นส่วนตัวตั้งแต่เริ่ม
▩

ลวดลายพื้นหลัง CSS

สร้างลวดลายพื้นหลัง CSS จากสองสีแล้วคัดลอก

ไฟล์ของคุณอยู่ในอุปกรณ์นี้

ไฟล์ประมวลผลในเบราว์เซอร์และไม่ถูกอัปโหลด เว็บไซต์จะดาวน์โหลดโค้ดและทรัพยากรที่จำเป็นต่อเครื่องมือ ไม่ต้องมีบัญชีและไม่มีตัวติดตาม

ใช้ปุ่มดาวน์โหลดเพื่อบันทึกเครื่องมือนี้เป็นไฟล์ HTML ไฟล์เดียวสำหรับใช้ออฟไลน์

ความเป็นส่วนตัว →

เกี่ยวกับเครื่องมือนี้

สร้างลวดลายพื้นหลังแบบซ้ำ — ลายทาง, ลายหมากรุก, จุด หรือตาราง — จากสองสีและขนาด โดยใช้ gradient เท่านั้น แล้วคัดลอก CSS ตัวอย่างอัปเดตแบบเรียลไทม์ในเบราว์เซอร์ของคุณ

คำถามที่พบบ่อย

ลวดลายเหล่านี้สร้างขึ้นโดยไม่ใช้รูปภาพได้อย่างไร?
ใช้ CSS linear และ radial gradient ร่วมกับ background-size ซึ่งเบราว์เซอร์จะปูซ้ำเพื่อวาดลวดลายที่ทำซ้ำ
ลวดลายจะปรับขนาดบนหน้าจอความละเอียดสูงได้ไหม?
ได้ — gradient เป็นแบบเวกเตอร์ ลวดลายจึงคมชัดที่ทุกความละเอียดหรือระดับการซูม

เครื่องมือเพิ่มเติม