เครื่องมือสร้างภาพพื้นหลังไล่ระดับสี
พื้นหลังแบบไล่ระดับสามสีที่มีการเบลอเข้มข้นคือสไตล์พื้นหลังของหน้าแลนดิงเพจ SaaS แทบทุกหน้า และของภาพพื้นหลังเดสก์ท็อปส่วนใหญ่ที่เผยแพร่ในช่วงสี่ปีที่ผ่านมา เครื่องมือนี้ผสมสีในรูปแบบเลขฐานสิบหกสามสีเข้าด้วยกัน โดยปรับมุมได้และใช้การเบลอแบบเกาส์เซียน แล้วส่งออกผลลัพธ์ในความละเอียดที่เหมาะกับเดสก์ท็อป สมาร์ทโฟน หรือพื้นหลัง Zoom
วิธีสร้างภาพพื้นหลังไล่ระดับสี
-
1
เลือกสามสี
ปรับค่าเลขฐานสิบหกได้โดยตรง หรือคลิก “สุ่ม” เพื่อได้พาเลตสีแบบไม่คาดคิด
-
2
ตั้งมุม
0–360° โดย 135° คือแนวทแยงแบบ “พระอาทิตย์ตก” และ 90° คือการไล่สีในแนวขวางแบบ “พระอาทิตย์ขึ้น”
-
3
ปรับระดับความเบลอ
ยิ่งเบลอมากก็ยิ่งซ่อนขอบเขตระหว่างสีและทำให้ทั้งผืนภาพเนียนขึ้น
-
4
ส่งออกรูปภาพ
ดาวน์โหลดในความละเอียดที่ตรงกับจอภาพหรือสมาร์ทโฟนของคุณ
ขนาดผลลัพธ์ที่แนะนำ
| เป้าหมาย | ความละเอียด |
|---|---|
| เดสก์ท็อป 4K | 3840 × 2160 |
| เดสก์ท็อป 1440p | 2560 × 1440 |
| เดสก์ท็อป 1080p | 1920 × 1080 |
| iPhone 15/16 | 1179 × 2556 |
| Android (รุ่นใหม่) | 1080 × 2400 |
| พื้นหลังเสมือนของ Zoom | 1920 × 1080 |
คำแนะนำเรื่องพาเลตสีที่ได้ผลเสมอ
- คู่สีตรงข้าม + สีกลาง: น้ำเงิน ส้ม เบจ
- สามสีใกล้เคียง: เลือกสามสีที่อยู่ในช่วงไม่เกิน 60° บนวงล้อสี, ม่วง แมเจนตา และชมพู
- ความตัดกันของโทนอุ่น-เย็น: สีอุ่นหนึ่งสี (พีช, แดง), สีเย็นหนึ่งสี (เขียวอมฟ้า, กรมท่า) และสีกลางหนึ่งสี (ครีม)
- โทนสีเดียว: การใช้สีเดียวในสามระดับความสว่างสร้างพื้นหลังที่เรียบง่ายและมีบรรยากาศกลมกลืน
ทำไมการเบลอจึงสำคัญ
ภาพไล่ระดับสามจุดที่ไม่มีการเบลอจะแสดงขอบเขตคมชัดตรงจุดเปลี่ยนสี (เรียกว่า “เอฟเฟกต์สายรุ้ง”) ส่วน filter: blur() ขนาด 60–100 พิกเซลบนผืนภาพขนาดใหญ่จะทำให้การเปลี่ยนสีนุ่มนวลกลายเป็นแผ่นสีที่ชวนให้นึกถึงภาพพื้นหลังของ macOS Big Sur หรือ iOS 16
ตัวอย่าง CSS แบบเรียลไทม์
background: linear-gradient(135deg, #FF6B35, #7B2D26, #1E3A8A);
filter: blur(80px);
หากคุณต้องการภาพไล่ระดับที่คมชัดโดยไม่เบลอ ให้ลดค่าฟิลเตอร์ลงเหลือ 0 และพิจารณาเปลี่ยนไปใช้การประมาณค่าแบบ in oklch เพื่อให้การไล่สีสม่ำเสมอตามการรับรู้ของสายตา
คำถามที่พบบ่อย
ฟิลเตอร์เบลอจะสุ่มเก็บค่าพิกเซลที่อยู่นอกผืนภาพ ซึ่งพิกเซลเหล่านั้นโปร่งใส สำหรับภาพพื้นหลัง ให้สร้างในขนาดที่ใหญ่กว่า แล้วค่อยเบลอ จากนั้นครอบตัดให้เหลือความละเอียดสุดท้าย ขอบภาพก็จะยังคงคมสะอาด
เครื่องมือนี้ใช้สามสี การใช้สีมากกว่านั้นมักให้ความรู้สึกเหมือนสกรีนเซฟเวอร์ ขณะที่สามสีคือจำนวนที่ลงตัวที่สุดสำหรับพื้นหลังที่ดูสงบ
ไม่เหมือนกันเสียทีเดียว เพราะสัดส่วนหน้าจอโทรศัพท์สูงกว่าเดสก์ท็อป มุมแนวทแยงจึงดูต่างออกไป ควรดูตัวอย่างในแต่ละขนาดเป้าหมาย และปรับมุมหากขนาดใดดูไม่เข้าที่
ไม่ ผืนภาพถูกวาดขึ้นในเครื่องของคุณเอง และสิ่งเดียวที่ออกจากเบราว์เซอร์คือไฟล์ที่คุณสั่งดาวน์โหลดเท่านั้น
เครื่องมือที่เกี่ยวข้อง
เลขฐานสองเป็นฐานสิบ
แปลงเลขฐานสองเป็นฐานสิบได้ทันที แสดงการกระจายตามตำแหน่งเพื่อให้เห็นว่าแต่ละบิตมีส่วนอย่างไร
เครื่องกำเนิดจานสี
สร้างพาเลตสีแบบเอกรงค์ ใกล้เคียง คู่ตรงข้าม ไตรแอดิก หรือเตตราดิกจากสี HEX หลัก พร้อมส่งออกตัวแปร CSS ที่คัดลอกได้ทันที
ตัวแปลง ASCII เป็นเลขฐานสอง
แปลงสตริง ASCII ใดก็ได้เป็นเลขฐานสอง อักขระทุกตัวกลายเป็นแปดบิต คั่นด้วยช่องว่าง พร้อมวางในการติดตามโปรโตคอลหรือการบ้าน
ตัวแปลง ASCII เป็น Hex
แปลงข้อความ ASCII เป็นค่า byte แบบ hexadecimal output ใช้ hex digits สองตัวต่อ character พร้อมสำหรับ memory dumps, packet traces หรือ firmware tables
ตัวแปลงไบนารีเป็น ASCII
วางข้อมูลไบนารี (ไบต์ที่คั่นด้วยช่องว่าง หรือบิตสตรีมยาวๆ) แล้วรับข้อความ ASCII ที่แทนค่านั้น รองรับการเข้ารหัสแบบ 7 บิตและ 8 บิต
ตัวแปลง BBCode เป็น HTML
แปลง BBCode (มาร์กอัปของเว็บบอร์ด) เป็น HTML ที่สะอาด รองรับแท็กจัดรูปแบบ รายการ quote, code, รูปภาพ ลิงก์ และตาราง