ตัวสร้างลวดลาย

เครื่องมือสีทั้งหมด

สร้างลวดลายพื้นหลัง SVG แบบไร้รอยต่อจากเกือบ 2,000 แบบ ปรับสี การซูม ระยะห่างและมุม แล้วคัดลอก CSS หรือดาวน์โหลด SVG, PNG หรือ WebP

ฟรี

1เลือกลวดลาย

ทั้งหมด เส้นและคลื่น จุดและวงกลม เรขาคณิต 3D และภาพลวงตา สิ่งทอและงานทอ อิฐและกระเบื้อง ญี่ปุ่น อิสลามและมัวร์ อาร์ตเดโค ชนเผ่าและพื้นบ้าน ธรรมชาติ ไอคอนและสิ่งของ พิกเซลอาร์ต สร้างจากอัลกอริทึม

หัวข้อของคุณอยู่ตรงนี้

ดูว่าลวดลายอยู่หลังเนื้อหาจริงแล้วเป็นอย่างไร

เริ่มต้นใช้งาน
ลวดลาย

เรียกดูตามคอลเลกชัน

เส้นและคลื่น 273 ลวดลาย จุดและวงกลม 189 ลวดลาย เรขาคณิต 138 ลวดลาย 3D และภาพลวงตา 99 ลวดลาย สิ่งทอและงานทอ 105 ลวดลาย อิฐและกระเบื้อง 148 ลวดลาย ญี่ปุ่น 33 ลวดลาย อิสลามและมัวร์ 30 ลวดลาย อาร์ตเดโค 47 ลวดลาย ชนเผ่าและพื้นบ้าน 62 ลวดลาย ธรรมชาติ 196 ลวดลาย ไอคอนและสิ่งของ 236 ลวดลาย พิกเซลอาร์ต 152 ลวดลาย สร้างจากอัลกอริทึม 251 ลวดลาย

เกี่ยวกับ ตัวสร้างลวดลาย

ตัวสร้างลวดลายเปลี่ยนเกือบ 2,000 แบบสำเร็จรูปให้เป็นพื้นหลังที่ปรับแต่งและนำไปใช้ได้ทันที เรียกดู 14 คอลเลกชัน ตั้งแต่คลื่น ลายจุดโพลก้าและเทสเซลเลชัน ไปจนถึงทาร์ตัน เซไกฮะของญี่ปุ่น ดาวอิสลาม พัดอาร์ตเดโค สไปรต์พิกเซลและลายพราง แล้วดูแต่ละแบบในสีของคุณเอง

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

เมื่อได้แบบที่ต้องการ ให้คัดลอกเป็น CSS, SCSS, การตั้งค่า Tailwind, SVG แบบอินไลน์, Data URI หรือคอมโพเนนต์ React หรือดาวน์โหลดเป็น SVG, PNG, JPG หรือ WebP ที่ขนาดใดก็ได้ไม่เกิน 8000 พิกเซล รวมถึงไทล์เดี่ยวสำหรับทำลายซ้ำเอง ทุกอย่างทำงานในเบราว์เซอร์ของคุณ ไม่มีการอัปโหลดใด ๆ และไม่ต้องมีบัญชี

วิธีใช้ ตัวสร้างลวดลาย

  1. เลือกลวดลาย: ค้นหาด้วยชื่อ หรือกรองตามคอลเลกชันและจำนวนสี
  2. เลือกสีด้วยตัวเลือกสี พาเลตต์สำเร็จรูป หรือ “พาเลตต์ใหม่”
  3. ปรับการซูม ตำแหน่ง ระยะห่าง ความหนาเส้นและมุม ล็อกค่าที่ชอบก่อนกด “ขอแรงบันดาลใจ”
  4. ตรวจสอบด้วยโหมดตัวอย่าง “แสดงไทล์” “บนหน้าเว็บ” และ “ในข้อความ”
  5. คัดลอกโค้ดหรือดาวน์โหลดไฟล์ และใช้ “คัดลอกลิงก์” เพื่อกลับมาที่ลวดลายนี้อีกครั้งในภายหลัง

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

ใช่ เครื่องมือนี้ใช้ฟรี ไม่ต้องสมัครสมาชิกและไม่จำกัดจำนวน ทุกลวดลายถูกวาดในเบราว์เซอร์ของคุณ จึงไม่มีการส่งไฟล์ไปยังเซิร์ฟเวอร์

ได้ คุณใช้ลวดลายที่ส่งออกในงานส่วนตัวและงานเชิงพาณิชย์ได้ เช่น เว็บไซต์ แอป บรรจุภัณฑ์และงานพิมพ์ โดยไม่ต้องให้เครดิต

ไม่มี ทุกรูปทรงที่ข้ามขอบของไทล์จะถูกวาดซ้ำอีกครั้งที่ฝั่งตรงข้าม การซ้ำจึงไร้รอยต่อ ใช้โหมดตัวอย่าง “แสดงไทล์” เพื่อดูว่าไทล์เริ่มและสิ้นสุดตรงไหน

CSS ง่ายที่สุด เพียงวางกฎลงในสไตล์ชีตแล้วใช้กับองค์ประกอบใดก็ได้ ที่มุม 0, 90, 180 หรือ 270 องศาจะใช้ไทล์เล็กหนึ่งชิ้นพร้อม background-size ส่วนมุมอื่นจะใช้ SVG ที่เติมเต็มองค์ประกอบ เวอร์ชัน Tailwind, SCSS, React และ Data URI มีลวดลายเดียวกัน

ภาพเคลื่อนไหวฝังอยู่ใน SVG จึงไม่ต้องใช้สคริปต์ และทำงานเป็นพื้นหลัง CSS ในเบราว์เซอร์สมัยใหม่ได้ด้วย ควรทดสอบในเบราว์เซอร์ที่คุณรองรับ ไฟล์ PNG, JPG และ WebP ยังคงเป็นรูปภาพ จึงเก็บไว้เพียงเฟรมแรก

แบบออร์แกนิก เช่น ลายพรางและแผนที่ภูมิประเทศ มีเส้นโค้งจำนวนมาก ขนาดของโค้ดแสดงอยู่ข้างปุ่มคัดลอก หากหนักเกินไปสำหรับหน้าเว็บ ให้เลือกแบบที่มีไทล์เล็กกว่า หรือใช้ไทล์ PNG แทน

ได้ ในลวดลายเกือบทุกแบบ เปิด “พื้นหลังโปร่งใส” แล้วส่งออกเป็น CSS, SVG, PNG หรือ WebP บางแบบที่มีรูปทรงซ้อนกันซ่อนรูปทรงด้วยสีพื้นหลัง จึงต้องใช้พื้นหลังทึบ ไฟล์ JPG ไม่รองรับความโปร่งใส
แชร์สิ่งนี้
เครื่องมือที่เกี่ยวข้อง
สร้างการไล่สี
เครื่องมือสร้างพาเลตสี
สร้างเฉดสี
สร้างการไล่สีจากรูปภาพ
ดึงสีจากรูปภาพ
ตรวจสอบความคมชัดของสี
AI สร้างชุดแบรนด์จากรูปภาพ
หน้าจอสีแดงเต็มจอ
วงล้อสีและการจับคู่สี
ส่งออกพาเลตสี
การจับคู่ฟอนต์และไดเรกทอรี Google Fonts
AI สร้างพาเลตแบรนด์
หยิบสีจากหน้าจอ
จำลองตาบอดสี
ตัวจับคู่สี Pantone
ผสมสี
ค้นหาชื่อสี
หน้าจอสีเขียวเต็มจอ
AI สร้างธีมและการไล่สี
ตัวแปลงรหัสสี
การค้นหายอดนิยม
ตัวสร้างลวดลาย svg ตัวสร้างลายไร้รอยต่อ ลายพื้นหลัง css โปรแกรมสร้างลายซ้ำ ลายพื้นหลังฟรี ตัวสร้างลายเรขาคณิต ลายพื้นหลัง tailwind ไทล์ png ไร้รอยต่อ
ต้องการความช่วยเหลือ?
พบปัญหากับเครื่องมือนี้หรือไม่? แจ้งทีมงานของเรา
รายงานปัญหา

เพิ่มเครื่องมือฟรีนี้ลงในเว็บไซต์ของคุณเอง: คัดลอกและวางโค้ดด้านล่าง