ตัวสร้าง CSS Mesh Gradient
สร้าง mesh gradient ด้วย CSS จากจุดสีหลายจุดพร้อมตำแหน่ง X/Y ปรับมุม และการไล่เฉดแบบ OKLab ที่นุ่มนวล พร้อมพรีวิวสดและโค้ด background ที่คัดลอกได้ทันที
Loading tool...
ตัวสร้าง CSS Mesh Gradient คืออะไร?
ตัวสร้าง CSS Mesh Gradient เป็นเครื่องมือแบบภาพสำหรับสร้าง gradient สไตล์ mesh จากจุดสีหลายจุด แต่ละจุดมีสีและตำแหน่ง X/Y ของตัวเอง แล้วเครื่องมือจะประกอบเป็น declaration linear-gradient อันเดียวพร้อมการไล่เฉด OKLab เพื่อการผสมสีที่นุ่มนวล พรีวิวสดอัปเดตทุกครั้งที่ปรับ และคลิกเดียวก็คัดลอก snippet พร้อมใช้งาน
ประโยชน์หลัก
- ได้การผสมสีหลายจุดที่สวยงามโดยไม่ต้องเขียน syntax gradient เอง
- การไล่เฉด OKLab ช่วยเลี่ยงแถบสีเทาขุ่นที่เกิดจาก gradient sRGB ธรรมดา
- ผลลัพธ์เป็น declaration เดียว อ่านง่าย วางง่าย ดูแลรักษาง่าย
- มี preset พาเลตและปุ่มสุ่ม ช่วยหาไอเดียได้รวดเร็ว
กรณีการใช้งาน
- •พื้นหลัง hero และ section ของ landing page
- •ฉากหลัง card และ badge ด้วยแสงเรืองหลายสีแบบนุ่มนวล
- •banner จำลองระหว่างออกแบบ visual system จริง
- •prototype ธีม gradient สำหรับ UI โหมดสว่างและมืดอย่างรวดเร็ว
วิธีสร้าง CSS Mesh Gradient
- เลือกสี: เลือกพาเลต preset หรือตั้งค่าจุดสีแต่ละจุดด้วย color picker แล้วปรับค่า hex ให้ละเอียด
- จัดตำแหน่งจุดสี: ลาก slider X และ Y ของแต่ละสีเพื่อวางตำแหน่งใน mesh สีที่วางห่างกันจะไล่เฉดหลากหลายทั่วทั้งกล่อง
- ปรับมุมและการไล่เฉด: หมุน gradient ด้วย slider มุม และสลับระหว่างการผสมแบบ OKLab นุ่มนวลกับ linear ธรรมดา
- คัดลอก CSS: ตั้งชื่อ class ตามต้องการ แล้วกดปุ่มคัดลอกและวาง snippet ลงใน stylesheet ของคุณ
คุณสมบัติหลัก
- จุดสีหลายจุดพร้อมตำแหน่ง X/Y แยกอิสระสำหรับการผสมสีแบบ mesh
- สลับการไล่เฉดแบบ OKLab ให้การเปลี่ยนสีนุ่มนวลตามการรับรู้ของตา
- Slider ปรับมุม gradient พร้อม preset พาเลตสีสำเร็จรูป
- ปุ่ม Randomize สุ่ม mesh ใหม่ที่กลมกลืนได้ทันที
- พรีวิวสดอัปเดตทุกการเปลี่ยนแปลง ไม่ต้อง reload หน้า
- คัดลอก snippet คลาส CSS พร้อมกำหนดชื่อ class เองได้
คำถามที่พบบ่อย
CSS mesh gradient คืออะไร?
mesh gradient คือการผสมสีหลายสีที่วางตำแหน่ง X/Y ต่างกัน แทนที่จะไล่สีตามเส้นตรงเส้นเดียว เบราว์เซอร์ยังไม่มี syntax แบบ mesh จริง เครื่องมือนี้จึงประกอบจาก linear-gradient หลายสีพร้อมจุด rgb() ที่ระบุตำแหน่ง ซึ่งเป็นวิธีที่ใช้งานได้จริงและแสดงผลได้ทุกที่
เบราว์เซอร์ไหนรองรับ CSS ที่สร้างขึ้น?
ผลลัพธ์ linear-gradient ทำงานได้ในเบราว์เซอร์สมัยใหม่ทุกตัว ส่วนการไล่เฉด OKLab (in oklab) รองรับใน Chrome 111+, Safari 16.4+ และ Firefox 113+ โดยเบราว์เซอร์รุ่นเก่าจะข้ามไปใช้การผสมสี sRGB ปกติอัตโนมัติ
ต่างจาก radial-gradient mesh อย่างไร?
mesh gradient แท้ (เช่น SVG mesh หรือการซ้อน radial-gradient หลายชั้น) ต้องใช้ syntax ที่ซับซ้อนมาก เครื่องมือนี้ใช้ declaration เดียวจึงวาง ปรับ และดูแลรักษาง่าย แต่ยังให้ผลการผสมสีหลายจุดที่สวยงาม
ใช้ gradient ที่สร้างในเชิงพาณิชย์ได้ไหม?
ได้ ผลลัพธ์คือ CSS ธรรมดาที่ไม่มีข้อจำกัดด้าน license ใช้ได้ทั้งโปรเจกต์ส่วนตัวและเชิงพาณิชย์ และคงบรรทัด background-color สำรองไว้หากต้องการรองรับ email client รุ่นเก่า