Softonic

เครื่องมือสร้างภาพพื้นหลังไล่ระดับสี

ขั้นตอน 1 / 3
ถัดไป

พื้นหลังแบบไล่ระดับสามสีที่มีการเบลอเข้มข้นคือสไตล์พื้นหลังของหน้าแลนดิงเพจ SaaS แทบทุกหน้า และของภาพพื้นหลังเดสก์ท็อปส่วนใหญ่ที่เผยแพร่ในช่วงสี่ปีที่ผ่านมา เครื่องมือนี้ผสมสีในรูปแบบเลขฐานสิบหกสามสีเข้าด้วยกัน โดยปรับมุมได้และใช้การเบลอแบบเกาส์เซียน แล้วส่งออกผลลัพธ์ในความละเอียดที่เหมาะกับเดสก์ท็อป สมาร์ทโฟน หรือพื้นหลัง Zoom

วิธีสร้างภาพพื้นหลังไล่ระดับสี

  1. 1

    เลือกสามสี

    ปรับค่าเลขฐานสิบหกได้โดยตรง หรือคลิก “สุ่ม” เพื่อได้พาเลตสีแบบไม่คาดคิด

  2. 2

    ตั้งมุม

    0–360° โดย 135° คือแนวทแยงแบบ “พระอาทิตย์ตก” และ 90° คือการไล่สีในแนวขวางแบบ “พระอาทิตย์ขึ้น”

  3. 3

    ปรับระดับความเบลอ

    ยิ่งเบลอมากก็ยิ่งซ่อนขอบเขตระหว่างสีและทำให้ทั้งผืนภาพเนียนขึ้น

  4. 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 เพื่อให้การไล่สีสม่ำเสมอตามการรับรู้ของสายตา

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

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

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

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

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

เครื่องมือที่เกี่ยวข้อง

ตัวสร้างการตั้งค่า Webpack

สร้าง webpack.config.js สำหรับ webpack 5 ทั้งแบบ JavaScript ล้วน React หรือ Vue พร้อม TypeScript, Babel, CSS หรือ Sass, รูปภาพ, HtmlWebpackPlugin, เซิร์ฟเวอร์สำหรับพัฒนา และคำสั่ง npm install

เครื่องแปลงฐานตัวเลข

แปลงตัวเลขระหว่างฐานสอง ฐานแปด ฐานสิบ ฐานสิบหก และฐานกำหนดเองตั้งแต่ 2 ถึง 36 พร้อมการแยกค่าประจำหลัก

ตัวแปลง Timestamp

แปลง timestamp ของ Unix ในหน่วยวินาทีหรือมิลลิวินาทีเป็นวันที่ที่อ่านง่ายในเขตเวลา UTC และเขตเวลาหลัก และแปลงวันที่กลับเป็นค่า epoch

เครื่องสุ่มที่อยู่

สร้างระเบียนคล้ายที่อยู่ 1–20 รายการสำหรับแบบจำลองและการทดสอบ ด้วยรูปแบบประเทศแบบย่อ

ตารางอ้างอิง ASCII

ตาราง ASCII ครบตั้งแต่ 0 ถึง 127 พร้อมค่าเลขฐานสิบ ฐานสิบหก ฐานแปด ฐานสอง และรูปแบบการอ้างอิงอักขระแบบตัวเลขของ HTML รวม NUL, LF และ DEL

อ้างอิงตัวอักษร HTML

รายการที่สามารถค้นหาได้ขององค์ประกอบ HTML พร้อมรหัสชื่อและรหัสตัวเลข รวมถึงฟังก์ชันสำเนาด้วยคลิกเดียวสำหรับตัวอักษรพิเศษและสัญลักษณ์ต่างๆ

เครื่องมือนี้มีให้บริการในภาษาอื่น