ข้ามไปยังเนื้อหา
patrache.tools

สร้างเกรเดียนท์

เครื่องมือสร้าง CSS gradient ออนไลน์ฟรี สร้างเกรเดียนท์แบบเส้นตรงและรัศมี ปรับทิศทาง สี และจุดหยุด คัดลอกโค้ดได้ทันที

ประเภท
มุม
90°
สี
0%
100%
โค้ด CSS
background: linear-gradient(90deg, #2563eb 0%, #7c3aed 100%);
lockไฟล์จะไม่ถูกส่งไปยังเซิร์ฟเวอร์
แชร์
ฝัง

ฝังเครื่องมือนี้ในเว็บไซต์ของคุณ

สร้าง CSS Gradient ฟรี ทั้งแบบเส้นตรงและรัศมี ปรับสี ทิศทาง และจุดหยุดสี พร้อมคัดลอกโค้ดไปใช้ได้ทันที

วิธีใช้งานสร้างเกรเดียนท์?

  1. เลือกประเภท gradient
  2. เพิ่มจุดหยุดสีและตั้งค่าสี
  3. คัดลอกโค้ด CSS ที่สร้าง

คำถามที่พบบ่อยเกี่ยวกับสร้างเกรเดียนท์

รองรับ gradient ประเภทใด?

รองรับ gradient เชิงเส้น รัศมี และกรวย

คัดลอกโค้ด CSS ได้โดยตรงไหม?

ได้ คัดลอกโค้ด CSS gradient ด้วยคลิกเดียวเพื่อใช้งานทันที

ทำไมกลางไล่ระดับสีถึงเกิดแถบสีเทาหม่น?

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

บันทึกไล่ระดับสีเป็นไฟล์ภาพ ไม่ใช่แค่ CSS ได้ไหม?

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

วิธีใช้สร้างเกรเดียนท์ให้เกิดประโยชน์สูงสุด?

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

Powered by Patrache Studio Tools

โปรดอนุญาตโฆษณาบนเว็บไซต์นี้

หากต้องการใช้เครื่องมือเหล่านี้ โปรดอนุญาตโฆษณาบนเว็บไซต์นี้ รายได้จากโฆษณาช่วยให้บริการนี้ยังคงใช้งานได้ฟรี

เปิดตัวบล็อกโฆษณา ปิดการบล็อกสำหรับเว็บไซต์นี้ แล้วตรวจสอบอีกครั้ง