เลือกสีสองสีขึ้นไป ลากเกรเดียนต์ตามต้องการ คัดลอก CSS หรือดาวน์โหลดเป็น PNG เพื่อใช้เป็นวอลเปเปอร์ พื้นหลังสไลด์ หรือพื้นหลังโพสต์โซเชียล รองรับเกรเดียนต์แบบเชิงเส้น รัศมี และโคนิก รวมถึงโหมดเกรเดียนต์เมชสำหรับพื้นหลังสไตล์ Apple ที่นุ่มนวลตามที่เห็นใน UI สมัยใหม่
อธิบายประเภทของเกรเดียนต์
- เชิงเส้น: เส้นตรงจากสี A ไปยังสี B ตัวเลือกทิศทาง (บน→ล่าง, แนวทแยง ฯลฯ)
- รัศมี: แบบศูนย์กลาง — สี A ตรงกลางค่อยๆ จางไปเป็นสี B ที่ขอบ เหมาะสำหรับเอฟเฟกต์สปอตไลต์
- โคนิก: หมุนรอบจุดศูนย์กลางเหมือนวงล้อสี กำลังเป็นที่นิยมในการออกแบบ UI สมัยใหม่
- เมช (พรีเมียม): จุดสีหลายจุดผสมกันอย่างราบรื่น ลักษณะ "เกรเดียนต์สไตล์ Apple"
สิ่งที่คุณสามารถคัดลอกได้
- CSS: พร้อมวาง
linear-gradient(...) หรือ background-image: พร้อมใช้งาน
- Tailwind: คลาส
bg-gradient-* ที่ใกล้เคียงที่สุด พร้อมการเพิ่มสีที่กำหนดเอง
- SVG: สำหรับใช้งานที่ปรับขนาดได้ในไอคอนหรือกราฟิก UI
- ดาวน์โหลด PNG: ทุกขนาด รวมถึงวอลเปเปอร์โทรศัพท์ (1284×2778), เดสก์ท็อป (3840×2160) และสี่เหลี่ยมจัตุรัส (1080×1080)
กรณีการใช้งานทั่วไป
- วอลเปเปอร์โทรศัพท์: เกรเดียนต์เมชเป็นที่นิยมมากบน iOS ลองใช้ ตัวอย่างวอลเปเปอร์ iPhone เพื่อทดสอบ
- พื้นหลังโพสต์โซเชียล: สร้างลุคที่ตรงกับแบรนด์ได้ทันทีสำหรับกราฟิกคำคม
- ส่วนฮีโร่: พื้นหลังเกรเดียนต์มีอยู่ทั่วไปในหน้า Landing Page
- สไลด์เด็ค: แทนที่พื้นหลังสีทึบที่น่าเบื่อ
การเลือกสีที่ใช้งานได้ดี
สีที่อยู่ติดกันบนวงล้อสี = สุภาพ กลมกลืน สีที่อยู่ตรงข้าม = โดดเด่น ดึงดูดความสนใจ เพิ่มจุดหยุดสีที่สามตรงกลางเพื่อเชื่อมช่องว่างที่กว้าง สำหรับเกรเดียนต์ที่ตรงกับแบรนด์ ให้วาง HEX ของแบรนด์ของคุณแล้วเลือกสีอ่อนหรือสีเข้มสำหรับจุดหยุดสีที่สอง ใช้ ตัวแปลงสี ของเราเพื่อค้นหาสีอ่อน (HSL ที่มีความสว่างสูงกว่า) หรือสีเข้ม (ต่ำกว่า)
คำถามที่พบบ่อย
Can I use these in production?
Yes — copied CSS works in any modern browser. SVG fallbacks are provided for older targets.
แล้วการรองรับ Radial Gradient ในเบราว์เซอร์เป็นอย่างไร?
รองรับได้ในเบราว์เซอร์สมัยใหม่ทั้งหมด โดยใช้ CSS เพียงบรรทัดเดียว
ฉันสามารถส่งออก PNG ได้ขนาดใหญ่แค่ไหน?
ฟรี: สูงสุด 4K (3840×2160) พรีเมียม: 8K และมากกว่านั้น
การใช้ mesh gradients ยากไหม?
บนเว็บนั้นใช้พื้นฐานจาก SVG หรือ canvas เรามอบไฟล์ PNG แบบแบนให้คุณใช้งานง่าย พร้อมซอร์ส SVG สำหรับแก้ไข
ฉันสามารถบันทึกการไล่เฉดสีของฉันได้ไหม?
ลงชื่อเข้าใช้ (ฟรี) และการไล่เฉดสีที่บันทึกไว้จะปรากฏในคลังของคุณ
'คอนิก' เกรเดียนต์คืออะไร?
หมุนวนรอบจุดหนึ่ง — เหมือนวงล้อสีหรือแผนภูมิวงกลม CSS สมัยใหม่รองรับฟีเจอร์นี้โดยตรง
ใช้กับเกรเดียนต์แบบเคลื่อนไหวได้ไหม?
ส่งออกเฉพาะแบบนิ่งเท่านั้น สำหรับพื้นหลังแบบเคลื่อนไหว ให้คัดลอก CSS และเพิ่ม CSS animation รอบมุมของเกรเดียนต์
ทำไมไม่เขียน CSS ด้วยมือล่ะ?
คุณสามารถทำได้ — เครื่องมือนี้ช่วยให้การปรับแต่งภาพเร็วขึ้นเท่านั้น คัดลอกและปรับแต่งได้เลย
เกี่ยวกับ เครื่องมือสร้างเกรเดียนต์
เครื่องมือสร้างเกรเดียนต์ เป็นเครื่องมือออนไลน์ฟรีจาก Wallpapers.com ที่ทำงานในเบราว์เซอร์ของคุณเท่านั้น — ไม่ต้องติดตั้ง ไม่มีลายน้ำ ไม่ต้องลงทะเบียนอีเมลสำหรับการลองครั้งแรก
สร้างเกรเดียนต์แบบเชิงเส้นหรือรัศมี พร้อมผลลัพธ์ CSS ที่คัดลอกและวางได้
วิธีใช้ เครื่องมือสร้างเกรเดียนต์
- เลือกสีจากตัวอย่างสี หรือวางค่า HEX/RGB
- ปรับผลลัพธ์ — จานสี ความคมชัด สีคู่ตรงข้าม
- คัดลอกค่า หรือส่งออกตัวอย่างสีเป็น JSON
เมื่อใดควรใช้
กรณีการใช้งานทั่วไปได้แก่:
เตรียมรูปภาพสำหรับอัปโหลดเว็บ, รายการสินค้าอีคอมเมิร์ซ, แพลตฟอร์มโซเชียลมีเดียที่มีข้อจำกัดรูปแบบ, และแปลงไฟล์จากอุปกรณ์หรือแอปหนึ่งไปยังอีกอุปกรณ์หนึ่ง
ฟรี vs พรีเมียม
ผู้เยี่ยมชมทุกคนได้รับทดลองใช้ฟรี; ผู้ใช้ที่ลงชื่อเข้าใช้ฟรีได้รับโควต้ารายวันสูงกว่า สมัครสมาชิก
พรีเมียม
เพื่อการใช้งานไม่จำกัด, ประมวลผลเป็นกลุ่มสูงสุด 200 รูปต่องาน, คิวลำดับความสำคัญ, และการเรียกดูไม่มีโฆษณา
เครื่องมือที่เกี่ยวข้อง
กำลังมองหาสิ่งที่แตกต่างเล็กน้อย? ลอง
ตัวเลือกสีจากรูปภาพ
,
ตัวดึงจานสี
หรือ
ตัวแปลงภาพขาวดำ
— หรือเรียกดูทั้งหมด
เครื่องมือสี เครื่องมือ.
