Go Toolstack

ตัวสร้างไล่ระดับสี Mesh Gradient

ออกแบบพื้นหลังไล่ระดับสีแบบหลายจุด (Mesh Gradient) สวยงามทันสมัย พร้อมโค้ด CSS และ SVG

ตัวสร้างไล่ระดับสี Mesh Gradient

ออกแบบพื้นหลังไล่ระดับสีแบบหลายจุด (Mesh Gradient) สวยงามทันสมัย พร้อมโค้ด CSS และ SVG

วิธีการทำงาน

1
Set Criteria & Options
Select length, format, or generation parameters for your output.
2
Generate Instantly
Generate secure, random, or custom data entirely in your browser.
3
Copy or Export
Copy the generated output to your clipboard or download the file.

Discover more client side utilities in this category

ศูนย์รูปภาพ & การออกแบบ • เวิร์กโฟลว์และคู่มือเปรียบเทียบ

สำรวจเครื่องมือรูปภาพ & การออกแบบทั้งหมด ขีดจำกัดของเบราว์เซอร์ และคู่มือการเลือกเครื่องมือ

สำรวจศูนย์ →
จัดรูปแบบ ตรวจสอบ และทำความสะอาด JSON

จัดรูปแบบ บีบอัด และตรวจสอบข้อมูล JSON ด้วยความแม่นยำ 64-bit และกฎ JSON Schema (Draft-07 / 2020-12)
เข้ารหัสและถอดรหัส Base64

แปลงข้อความและข้อมูลระหว่างข้อความธรรมดากับ Base64 รองรับ UTF-8 ภาษาไทย และรูปแบบ URL-Safe
จัดรูปแบบ SQL

จัดรูปแบบแบบสอบถาม SQL ปรับเยื้องและจัดระเบียบคำสั่ง รองรับหลายไดอะเลกต์

คู่มือบล็อกที่เกี่ยวข้อง

คู่มือทางเทคนิค การแก้ไขปัญหา และขั้นตอนการปฏิบัติที่ดีที่สุด

รูปภาพ & การออกแบบ • ~4 นาทีในการอ่าน

เปรียบเทียบการบีบอัดรูปภาพ WebP, AVIF, JPEG และ PNG: คุณภาพ ขนาดไฟล์ และการประมวลผลจริง | GoToolstack

วิเคราะห์เชิงเปรียบเทียบรูปแบบการบีบอัดรูปภาพ WebP, AVIF, JPEG และ PNG ทำความเข้าใจความแตกต่างระหว่าง Lossy และ Lossless การประมวลผลด้วย HTML5 Canvas และ WebAssembly ในเบราว์เซอร์

อ่านคู่มือ →
รูปภาพ & การออกแบบ • ~4 นาทีในการอ่าน

วิธีตรวจดูและลบข้อมูล EXIF ในภาพถ่าย: ปกป้องตำแหน่ง GPS และข้อมูลส่วนบุคคลก่อนแชร์ออนไลน์ | GoToolstack

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

อ่านคู่มือ →
ศูนย์ความรู้และแนวคิด

เครื่องมือสร้างฉากหลัง CSS Mesh Gradient ผสมผสานสีหลายจุดและส่งออกโค้ด CSS

Mesh Gradient เป็นเทคนิคการไล่ระดับสีหลายจุดที่ผสมผสานกันอย่างนุ่มนวล ช่วยสร้างฉากหลังที่มีมิติความลึก สวยงาม และดูทันสมัย นิยมใช้เป็นพื้นหลังหน้าแรก เว็บแอปพลิเคชัน และสื่อการตลาด

เครื่องมือนี้ช่วยให้คุณสามารถวางจุดสี (Color Stops) บนผืนผ้าใบ ปรับแต่งพิกัดและรัศมีการกระจายแสงได้อย่างอิสระ พร้อมสร้างโค้ด CSS มาตรฐานด้วยการซ้อน radial-gradient หลายชั้น โดยไม่ต้องใช้ไฟล์รูปภาพขนาดใหญ่ ทำให้หน้าเว็บโหลดได้อย่างรวดเร็ว ประมวลผลในเบราว์เซอร์ 100%

สูตรและหลักการทางเทคนิค

ฉากหลังแบบ Mesh = background-color: สีพื้นฐาน ; background-image: ⋃ [ radial-gradient(at xᵢ% yᵢ%, สีᵢ 0px, transparent รัศมีᵢ) ]

รวมเลเยอร์ radial-gradient หลายชั้นที่มีการกระจายสีแบบโปร่งใส ณ จุดพิกัดต่างๆ ซ้อนทับลงบนสีพื้นหลังหลักในรูปแบบ CSS มาตรฐาน

ข้อแนะนำและวิธีปฏิบัติที่ถูกต้อง

  • เลือกคู่สีที่กลมกลืนกัน 3 ถึง 5 จุดสี: การใช้สีในโทนใกล้เคียงกัน (Analogous Colors) จะช่วยให้การผสมผสานของสีดูละมุนและสบายตา
  • กำหนดสีพื้นฐาน (Base Background Color) ให้เข้ากับภาพรวม: ใส่ background-color เผื่อไว้เสมอเพื่อให้เป็นสีสำรองระหว่างที่เกรเดียนต์กำลังโหลด และช่วยให้การเฟดของสีเนียนตาขึ้น
  • กระจายตำแหน่งของจุดสีไม่ให้ซ้อนทับกันตรงๆ: วางจุดสีไว้บริเวณมุมหรือขอบระนาบเพื่อให้เกิดการเกลี่ยสีในพื้นที่ว่างตรงกลางอย่างเป็นธรรมชาติ
  • ใช้ CSS Mesh Gradient แทนไฟล์ภาพขนาดใหญ่: การใช้โค้ด CSS ช่วยลดขนาดการดาวน์โหลดหน้าเว็บจากหลายร้อยกิโลไบต์ให้เหลือเพียงไม่กี่ร้อยไบต์ เพิ่มคะแนนความเร็วของเว็บได้ทันที

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

เหตุใดการใช้ CSS Mesh Gradient จึงมีประสิทธิภาพดีกว่าการใช้ภาพพื้นหลัง PNG หรือ JPG?
เพราะโค้ด CSS มีขนาดเพียงไม่กี่ร้อยไบต์ และถูกเรนเดอร์โดยตรงผ่าน GPU ของเบราว์เซอร์ ไม่ต้องรอการดาวน์โหลดไฟล์ภาพขนาดใหญ่ผ่านเครือข่าย
โค้ด CSS ที่ได้รองรับการแสดงผลบนอุปกรณ์มือถือได้ดีหรือไม่?
รองรับได้อย่างสมบูรณ์บนทุกหน้าจอ เนื่องจากพิกัดของจุดสีถูกกำหนดเป็นเปอร์เซ็นต์ ทำให้เกรเดียนต์ปรับขนาดตามความกว้างของหน้าจอโดยอัตโนมัติ
เบราว์เซอร์รุ่นเก่ารองรับ radial-gradient ซ้อนกันหลายชั้นหรือไม่?
เบราว์เซอร์สมัยใหม่ทั้งหมดรองรับคำสั่งนี้มานานกว่าทศวรรษ จึงมั่นใจได้ว่าจะแสดงผลได้ถูกต้องในทุกแพลตฟอร์ม
สามารถปรับแต่งแอนิเมชันให้จุดสีขยับได้หรือไม่?
สามารถทำได้ โดยเขียนคีย์เฟรม CSS เพื่อปรับเปลี่ยนค่า background-position หรือแปลงจุดสีไปใช้งานร่วมกับ Canvas API