เครื่องมือสร้างพื้นหลังลวดลายด้วย CSS

เครื่องมือที่ชื่อว่า "ตัวสร้างลวดลาย" ส่วนใหญ่มักจะนำสูตร repeating-linear-gradient เดิมมาใช้ซ้ำกับทุกตัวเลือก แล้วเปลี่ยนแค่ตัวเลข เครื่องมือนี้ไม่ใช่: ลวดลายทั้งหกประเภทถูกสร้างจากเทคนิค CSS เฉพาะที่ให้รูปร่างนั้นจริง ๆ ลายทางใช้ repeating-linear-gradient เส้นเดียวกับแถบสีสองสี ลายจุดใช้ radial-gradient หนึ่งอันแล้วไทล์ผ่าน background-size เพียว ๆ — เทคนิคคลาสสิกสำหรับจุด CSS — แทนที่จะเป็น repeating-radial-gradient ซึ่งไม่สามารถไทล์จุดวงกลมลงบนกริดสี่เหลี่ยมได้อย่างสะอาด ลายตารางหมากรุกใช้สูตร conic-gradient สี่ส่วนที่แท้จริง: conic gradient ที่อยู่กึ่งกลางไทล์สี่เหลี่ยมจะแบ่งเป็นสี่เหลี่ยมจัตุรัสสี่ส่วนที่ขอบ 90 องศาอย่างเป็นธรรมชาติ และการสลับสองสีทั่วทั้งสี่ส่วนนั้นจะปูกระเบื้องเป็นลายตารางหมากรุกแท้ ไม่ใช่การประมาณ

ลายกริดและลายกากบาททแยง ต่างใช้ repeating-linear-gradient สองเส้นซ้อนกันเป็นรายการ background-image แยกต่างหาก แทนที่จะใช้ลูกเล่นเส้นขอบหลอกสร้างทิศทางที่สอง ลายกริดรวม repeating gradient "ไปทางขวา" และ "ลงด้านล่าง" เพื่อสร้างเส้นกริดแนวนอนและแนวตั้งที่คมชัด ลายกากบาททแยงซ้อน gradient ที่ +45 องศาและ -45 องศา เพื่อสร้างลายสานแนวทแยงคล้ายลวดลายเครื่องจักสาน — ควรค่าแก่ความแม่นยำ: นี่คือลายกากบาททแยงที่ซื่อตรง ไม่ใช่เรขาคณิตลายก้างปลาแท้ และเครื่องมือระบุเช่นนั้นโดยไม่โอ้อวดเกินจริง ลายสามเหลี่ยมใช้เทคนิค conic-gradient สี่ลิ่มของลายตารางหมากรุกซ้ำ แต่เริ่ม gradient โดยหมุน 45 องศา ซึ่งย้ายขอบลิ่มจากจุดกึ่งกลางขอบของไทล์ไปยังมุม และเปลี่ยนลิ่มทั้งสี่ให้เป็นรูปสามเหลี่ยมจากมุมหนึ่งไปยังอีกมุมหนึ่ง แทนที่จะเป็นสี่เหลี่ยมจัตุรัสสี่ส่วน

ลวดลายทุกประเภทแสดงเฉพาะตัวควบคุมที่ใช้กับมันจริง ๆ — แถบเลื่อนมุมปรากฏสำหรับลายทาง, รัศมีจุดและระยะห่างปรากฏสำหรับลายจุด, ความหนาของเส้นปรากฏสำหรับลายกริดและลายกากบาท — และพื้นที่แสดงตัวอย่างแบบปูกระเบื้องขนาดใหญ่จะวาดใหม่ทุกครั้งที่เปลี่ยนแปลง คุณจึงเห็นการวนซ้ำเต็มหลายรอบก่อนยืนยันค่า เปลี่ยนโหมดผลลัพธ์เป็น SVG แล้วลวดลายเดิมจะปรากฏอีกครั้งในรูปแบบอิลิเมนต์ <pattern> ที่สร้างจาก primitive รูปสี่เหลี่ยมผืนผ้า, วงกลม, เส้นพาธ หรือรูปหลายเหลี่ยมแบบธรรมดา พร้อมแทรกลงใน <defs> ของเอกสาร SVG ใด ๆ ได้ทันที พร้อมดาวน์โหลดครั้งเดียวเป็นไฟล์ .svg แบบสแตนด์อโลน

ทุกอย่างประมวลผลในเบราว์เซอร์ของคุณ: ไม่มีการอัปโหลดรูปภาพ ไม่ต้องเดินทางไปกลับเซิร์ฟเวอร์ ไม่มีบัญชีผู้ใช้ สำหรับการเติมสีเรียบหรือไล่ระดับโดยไม่ทำซ้ำ ให้ใช้เครื่องมือ CSS gradient generator บนเว็บนี้แทน เครื่องมือนี้สร้างขึ้นสำหรับพื้นหลังเรขาคณิตที่ปูกระเบื้องได้จากสินทรัพย์รูปภาพเป็นศูนย์โดยเฉพาะ