ดึงการไล่สีที่สวยงามจากรูปถ่ายใดก็ได้ — วางรูป เลือกอารมณ์ และสีหลักจะกลายเป็นจุดหยุดที่ลากได้ คัดลอก CSS พร้อมวางได้ทันที

ลากและวางรูปภาพที่นี่

หรือคลิกเพื่อเลือก — วางจากคลิปบอร์ดได้ด้วย

ทุกอย่างทำงานในเบราว์เซอร์ — รูปภาพของคุณไม่ถูกอัปโหลด ไม่ต้องสมัคร ฟรีทั้งหมด

รูปภาพต้นทาง
กำลังอ่านสี…
รูปภาพต้นทาง
อารมณ์
สีที่ดึงออกมา
นี่คือสีหลักที่ดึงจากรูปภาพ คลิก swatch เพื่อคัดลอก หรือลากจุดหยุดด้านล่างเพื่อปรับการไล่สี
ตัวอย่างการไล่สี
ประเภทการไล่สี
มุม
°
จุดหยุดสี
ลากจุดเพื่อย้ายตำแหน่ง หรือคลิกบาร์เพื่อเพิ่มจุด เลือกจุดเพื่อแก้ไขสี
จุดหยุดที่เลือก
%
CSS
background: ;

เกี่ยวกับ สร้างการไล่สีจากรูปภาพ

Gradient Generator from Image เปลี่ยนภาพถ่ายใดก็ได้ให้กลายเป็นเกรเดียนต์ CSS ที่พร้อมใช้งาน ลาก เลือก หรือวางภาพ แล้วเครื่องมือจะอ่านภาพนั้นบนแคนวาส ดึงสีเด่นออกมา และจัดวางเป็นจุดหยุดของเกรเดียนต์ที่คุณลาก เปลี่ยนสี และจัดลำดับใหม่ได้จนกว่าการผสมผสานจะตรงกับความรู้สึกของภาพต้นฉบับ

ตัวเลือกอารมณ์ Colorful, Bright, Muted, Deep หรือ Dark จะเปลี่ยนว่าสีที่ดึงออกมาสีใดกลายเป็นจุดหยุด ทำให้ภาพเดียวให้เกรเดียนต์ที่แตกต่างกันได้หลายแบบ คุณควบคุมประเภทเกรเดียนต์ (linear, radial หรือ conic) มุม และจุดหยุดเอง คลิกที่แถบเพื่อเพิ่มจุด ลากเพื่อย้ายตำแหน่ง กลับด้านหรือหมุนได้ด้วยคลิกเดียว

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

วิธีใช้ สร้างการไล่สีจากรูปภาพ

  1. ลากและวางภาพ คลิกเพื่อเลือกไฟล์ หรือวางจากคลิปบอร์ด
  2. เลือกอารมณ์สี Colorful, Bright, Muted, Deep หรือ Dark เพื่อกำหนดว่าสีที่ดึงมาสีใดจะกลายเป็นจุดหยุด
  3. เลือกประเภทเกรเดียนต์ (linear, radial หรือ conic) และปรับมุม
  4. ลากจุดหยุดสีเพื่อปรับแต่งการผสมผสาน เพิ่ม ลบ กลับด้าน หรือสลับจุดหยุดตามต้องการ
  5. คลิก "Copy CSS" เพื่อดึงโค้ดเกรเดียนต์ที่พร้อมวางใช้งาน

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

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

ใช่ ฟรีทั้งหมด เนื่องจากทำงานฝั่งไคลเอนต์ทั้งหมด จึงไม่มีเครดิต บัญชี หรือข้อจำกัด ดึงเกรเดียนต์จากภาพได้มากเท่าที่ต้องการ

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

อารมณ์สีจะจัดลำดับสีที่ดึงจากภาพของคุณใหม่ Colorful เน้นเฉดสีสดใสหลากหลาย Bright เลือกโทนสว่างอิ่มตัว Muted เลือกโทนที่นุ่มนวลลดความอิ่มตัว ส่วน Deep และ Dark ดึงสีที่เข้มข้นและเข้มกว่า การสลับอารมณ์จะสร้างจุดหยุดเกรเดียนต์ใหม่ทันที

ได้ ทุกจุดหยุดลากได้ คุณคลิกที่แถบเพื่อเพิ่มจุดหยุดหรือลบจุดที่เลือก เปลี่ยนสีของจุดหยุดใด ๆ สลับระหว่าง linear, radial และ conic หมุนมุมทีละ 45° กลับทิศทาง หรือสลับสีใหม่จากภาพ

แชร์สิ่งนี้

การค้นหายอดนิยม
ไล่เฉดจากรูปภาพ แยกไล่เฉดจากภาพถ่าย รูปภาพเป็น css gradient เครื่องสร้างไล่เฉดจากภาพ สร้างไล่เฉดจากรูป css gradient จากรูปภาพ
ต้องการความช่วยเหลือ?
พบปัญหากับเครื่องมือนี้หรือไม่? แจ้งทีมงานของเรา
รายงานปัญหา

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