Softonic

เครื่องสร้างเกรเดียนต์ CSS

ขั้นตอน 1 / 3
ประเภท
ถัดไป

พื้นหลังของอินเทอร์เฟซสมัยใหม่แทบไม่ใช้สีเรียบเลย ทั้งส่วนฮีโร ปุ่ม และการ์ด ส่วนใหญ่ล้วนใช้เกรเดียนต์ CSS เครื่องมือนี้ช่วยให้คุณเลือกแบบเชิงเส้นหรือแบบรัศมี เพิ่มจุดสีได้มากเท่าที่ต้องการ ตั้งค่ามุม (สำหรับแบบเชิงเส้น) หรือรูปร่าง (สำหรับแบบรัศมี) และคัดลอกค่า background: linear-gradient(…) ที่สะอาดพร้อมวางลงในสไตล์ชีตของคุณได้ทันที

วิธีสร้างเกรเดียนต์ใน CSS

  1. 1

    เลือกประเภทเกรเดียนต์

    แบบเชิงเส้น (ตามทิศทางจากมุม) หรือแบบรัศมี (วงกลม/รูปวงรี)

  2. 2

    ตั้งมุมหรือรูปร่าง

    แบบเชิงเส้น: 0–360° แบบเชิงรัศมี: วงกลมหรือวงรี

  3. 3

    เพิ่มจุดหยุดสี

    แต่ละจุดหยุดประกอบด้วยสีหนึ่งสีร่วมกับค่าตำแหน่ง (0–100%) โดยเกรเดียนต์สองจุดถือเป็นมาตรฐานพื้นฐาน ส่วนเกรเดียนต์สามจุดขึ้นไปจะให้การเปลี่ยนผ่านที่ลื่นไหลยิ่งขึ้น

  4. 4

    คัดลอก CSS

    ผลลัพธ์คือค่าของคุณสมบัติ `background` เพียงค่าเดียว ซึ่งสามารถนำไปวางไว้ในไฟล์ CSS ใดก็ได้

ตารางสรุปไวยากรณ์

/* แบบเชิงเส้น */
background: linear-gradient(135deg, #6366F1 0%, #EC4899 100%);

/* แบบรัศมี (วงกลม) */
background: radial-gradient(circle at center, #6366F1 0%, #EC4899 100%);

/* แบบหลายจุด */
background: linear-gradient(90deg, #fff 0%, #f59e0b 50%, #ef4444 100%);

มุมที่สอดคล้องกับสามัญสำนึกอย่างแท้จริง

มุมของเกรเดียนต์ CSS แตกต่างจากค่าในตรีโกณมิติ โดย 0deg ชี้ไปทาง ขึ้น (ทิศเหนือ) 90deg ชี้ไปทาง ขวา (ทิศตะวันออก) 180deg ชี้ลง และ 270deg ชี้ไปทางซ้าย

ทิศทาง มุม
จากบนลงล่าง 180 องศา
จากล่างขึ้นบน 0 องศา
จากซ้ายไปขวา 90 องศา
จากมุมซ้ายบนไปมุมขวาล่าง 135 องศา

การหลีกเลี่ยงโทนสีกลางที่ขุ่นมัว

เกรเดียนต์เชิงเส้นระหว่างสีคู่ตรงข้าม (เช่น สีน้ำเงิน → สีส้ม) มักผ่านแถบสีเทาบริเวณประมาณ 50% ซึ่งทำให้การผสมสีดูไม่มีชีวิตชีวา แก้ไขได้โดย:

  • เพิ่มจุดสีกลางในโทนสีที่เกี่ยวข้อง (สีน้ำเงิน → สีม่วง → สีส้ม)
  • ใช้การประมาณค่าแบบ OKLCH (linear-gradient(in oklch, ...)) เพื่อให้การผสมสีราบรื่นขึ้นตามการรับรู้, รองรับในเบราว์เซอร์สมัยใหม่ทุกตัวตั้งแต่ปี 2024 เป็นต้นไป
  • ปรับโทนสีของจุดปลายข้างใดข้างหนึ่งเล็กน้อย เพื่อให้โทนกลางอยู่ในกลุ่มสีที่อบอุ่นกว่า

คำแนะนำด้านประสิทธิภาพ

เกรเดียนต์วาดโดย GPU และโดยทั่วไปมีค่าใช้จ่ายต่ำ อย่างไรก็ตาม การทำแอนิเมชันให้เกรเดียนต์ (เช่น เทคนิค background-position หรือเอฟเฟกต์เบลอแบบ SVG) ก็ยังอาจเพิ่มค่าใช้จ่ายในการวาดได้ ควรทดสอบบนสมาร์ทโฟนระดับกลางก่อนนำไปใช้จริง

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

เกรเดียนต์ใน CSS วัดมุมตามทิศทางนาฬิกาจากด้านบน ในขณะที่คณิตศาสตร์มาตรฐานจะวัดมุมในทิศตรงกันข้ามกับทิศนาฬิกาจากด้านขวา โดย 90deg ใน CSS ชี้ไปทางขวา ซึ่งในเรขาคณิตจะเทียบเท่ากับ 0°

ข้อกำหนดอนุญาตให้ใช้จำนวนเท่าใดก็ได้ ในทางปฏิบัติ การใช้จุดสีมากกว่า 4–5 จุดมักให้ผลลัพธ์คล้ายรุ้งสี ส่วนการใช้เพียง 2 หรือ 3 จุดที่เลือกมาอย่างเหมาะสมมักให้ภาพที่สะอาดตากว่าเสมอ

ได้, วางเป็นค่ากำหนดเอง เช่น class="bg-[linear-gradient(135deg,#6366F1,#EC4899)]" หากต้องการเกรเดียนต์ที่ใช้ซ้ำได้ ให้กำหนดยูทิลิตีเฉพาะในไฟล์กำหนดค่าของ Tailwind

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

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

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

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

ตัวลดรูปพีชคณิตบูลีน

ลดรูปนิพจน์บูลีนด้วยแผนผัง Karnaugh และอัลกอริทึม Quine-McCluskey แสดงทุกขั้นตอนการลดรูปและผลลัพธ์สุดท้ายในรูป SOP/POS

เลขฐานสองเป็นฐานสิบ

แปลงเลขฐานสองเป็นฐานสิบได้ทันที แสดงการกระจายตามตำแหน่งเพื่อให้เห็นว่าแต่ละบิตมีส่วนอย่างไร

เครื่องสร้างตัวอักษรสุ่ม

สร้างตัวอักษร A-Z แบบสุ่ม เลือกจำนวน ตัวพิมพ์ใหญ่ ตัวพิมพ์เล็ก หรือแบบผสม แล้วใช้กับเกม โจทย์ หรือกิจกรรมในห้องเรียน

ตัวแปลง BBCode เป็น HTML

แปลง BBCode (มาร์กอัปของเว็บบอร์ด) เป็น HTML ที่สะอาด รองรับแท็กจัดรูปแบบ รายการ quote, code, รูปภาพ ลิงก์ และตาราง

เครื่องกำเนิดจานสี

สร้างพาเลตสีแบบเอกรงค์ ใกล้เคียง คู่ตรงข้าม ไตรแอดิก หรือเตตราดิกจากสี HEX หลัก พร้อมส่งออกตัวแปร CSS ที่คัดลอกได้ทันที