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

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

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

ตารางอ้างอิงแป้นพิมพ์ลัด

ค้นหาแป้นพิมพ์ลัดเริ่มต้นตามเอกสารของ VS Code, Chrome และ Bash ที่ใช้ GNU Readline บน macOS, Windows และ Linux

ตัวตรวจสอบอีเมล

ตรวจสอบที่อยู่อีเมล: ตรวจไวยากรณ์ RFC 5322 ค้นหา MX เรกคอร์ดแบบเรียลไทม์ พร้อมรายละเอียดส่วนท้องถิ่น โดเมน และความยาว ไม่มีการส่งอีเมลใด ๆ

เครื่องมือสร้าง EditorConfig

สร้างไฟล์ .editorconfig จากกฎการเยื้อง การจบบรรทัด และชุดอักขระของคุณ แล้วเพิ่มเซกชันที่ถูกต้องให้ทุกภาษาในรีโพซิทอรี ทั้ง Python, Go, YAML, Makefile และอื่น ๆ

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

ประเมินนิพจน์บูลีนสำหรับทุกชุดอินพุตและดูตารางค่าความจริงที่สมบูรณ์ รองรับตัวแปรสูงสุดห้าตัวและตัวดำเนินการ &, |, !, ^

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