เครื่องมือสร้าง CSS Gradient (หลายเลเยอร์ ทำซ้ำ)

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

วิธีใช้

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

หลักการทำงาน

• ผลลัพธ์คือการประกาศ background-image หนึ่งบรรทัด เลเยอร์จะวาดจากบนลงล่างตามลำดับใน CSS สีโปร่งแสงเขียนในรูป rgb(r g b / a)
• จุดกึ่งกลางคือคำใบ้การเปลี่ยนสีของ CSS ที่ย้ายตำแหน่งซึ่งสีของจุดสองจุดผสมกันครึ่งต่อครึ่ง การทำซ้ำจะปูช่วงตั้งแต่จุดแรกถึงจุดสุดท้ายซ้ำไปเรื่อย ๆ เหมือน repeating-linear-gradient
• มุมและคีย์เวิร์ดขนาดของแบบรัศมีเป็นไปตาม CSS Images 3 และสีผสมกันใน sRGB เช่นเดียวกับค่าเริ่มต้นของเบราว์เซอร์ PNG วาดในเบราว์เซอร์ด้วยกฎเดียวกัน
• เลเยอร์และจุดสีของคุณจะถูกเก็บไว้ในเบราว์เซอร์นี้

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

จะซ้อนการไล่เฉดสีหลายชั้นใน CSS ได้อย่างไร

เขียนเรียงกันใน background-image โดยคั่นด้วยจุลภาค อันแรกจะวาดอยู่บนสุด ดังนั้นเลเยอร์ด้านบนต้องมีความโปร่งใสบ้าง ช่อง CSS จะเขียนในรูปแบบนี้ให้

จะทำพื้นหลังลายทางได้อย่างไร

เปิด "ทำซ้ำ" แล้ววางจุดสีเดียวกันสองจุดไว้ที่ตำแหน่งเดียวกันเพื่อให้ขอบคม ค่าที่ตั้งไว้ "ลายทาง" เป็นจุดเริ่มต้นที่เร็ว

ตรงกลางของการไล่เฉดสีดูหม่น ควรทำอย่างไร

เปิด "จุดกึ่งกลาง" เพื่อย้ายตำแหน่งที่สีผสมกัน หรือเพิ่มจุดสีที่ต้องการไว้ตรงกลาง สีคู่ตรงข้ามเมื่อผสมกันจะกลายเป็นสีเทา

ภาพตัวอย่างกับ PNG ต่างกันได้ไหม

ภาพตัวอย่างวาดโดยเบราว์เซอร์จาก CSS ส่วน PNG คำนวณด้วยกฎเดียวกัน นอกจากการปัดเศษแล้วทั้งสองจะตรงกัน