เครื่องกำเนิดพื้นหลังรูปแบบ CSS

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

กริดและเส้นทแยงมุมครอสแฮทช์ทั้งสองเลเยอร์การไล่ระดับสีเชิงเส้นซ้ำสองชั้นเป็นรายการภาพพื้นหลังแยกกัน แทนที่จะแกล้งทำเป็นทิศทางที่สองด้วยเทคนิคเส้นขอบ ตารางรวมการไล่ระดับสีแบบ "ไปทางขวา" และ "ไปด้านล่าง" เข้าด้วยกัน เพื่อให้ได้เส้นกฎแนวนอนและแนวตั้งที่คมชัด Crosshatch เลเยอร์ +45deg และ -45deg ไล่ระดับซ้ำสำหรับการทอแบบสานทแยงมุมแบบตะกร้า — ควรค่าแก่ความแม่นยำ: นี่คือ crosshatch ที่เที่ยงตรง ไม่ใช่รูปทรงแฉกแนวตั้งที่แท้จริง และเครื่องมือจะติดป้ายกำกับไว้ในลักษณะนั้นมากกว่าที่จะโอเวอร์เคลม รูปสามเหลี่ยมใช้เทคนิคการไล่ระดับทรงกรวยสี่ลิ่มของกระดานหมากรุก แต่เริ่มการไล่ระดับสีโดยหมุน 45 องศา ซึ่งจะเลื่อนขอบเขตลิ่มจากจุดกึ่งกลางขอบของแผ่นกระเบื้องไปที่มุม และเปลี่ยนสี่เวดจ์เดียวกันให้กลายเป็นสามเหลี่ยมสี่มุมต่อมุมแทนที่จะเป็นสี่เหลี่ยมจตุรัสสี่อัน

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

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