ตัวอย่าง

ตั้งค่า Gradient

°
#10%
#2100%

โค้ด CSS

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

ชุดค่าตัวอย่าง

ประเภท Gradient

Linear

สีไล่ไปตามเส้นตรงตามมุมที่กำหนด

Radial

สีกระจายออกจากจุดกึ่งกลางเป็นวงกลมหรือวงรี

Conic

สีไล่รอบจุดกึ่งกลางคล้ายวงล้อสี

เกี่ยวกับเครื่องมือสร้าง CSS Gradient

ออกแบบ CSS gradients ด้วยตัวสร้างแบบเห็นภาพ เลือก linear, radial หรือ conic gradient เพิ่มจุดสี ลากเพื่อปรับตำแหน่ง และคัดลอกโค้ด CSS ได้ในคลิกเดียว

✓รองรับ linear, radial และ conic gradients
✓ลากปรับตำแหน่งจุดสีได้
✓ชุดค่าตัวอย่างสวยๆ 12 แบบ
✓คัดลอกโค้ด CSS ได้ในคลิกเดียว

คู่มือ CSS Gradients ฉบับสมบูรณ์

เครื่องมือสร้าง CSS Gradient ออนไลน์ฟรี

สร้าง CSS gradients พร้อมตัวอย่างแบบสด ออกแบบ linear, radial และ conic gradients ด้วยหลายจุดสี ควบคุมมุมได้ละเอียด และได้โค้ด CSS ที่พร้อมใช้งานจริง

CSS Gradients คืออะไร?

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

ประเภทของ CSS Gradients

Linear Gradient

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

Radial Gradient

  • กระจายสีออกจากจุดกึ่งกลาง
  • รองรับรูปทรงวงกลมหรือวงรี
  • สร้างเอฟเฟกต์ spotlight ได้
  • ปรับตำแหน่งจุดกึ่งกลางได้
  • เหมาะกับเอฟเฟกต์เรืองแสง

Conic Gradient

  • หมุนสีรอบจุดกึ่งกลาง
  • สร้างลวดลายคล้าย pie chart
  • เหมาะกับเอฟเฟกต์วงล้อสี
  • ปรับมุมเริ่มต้นได้
  • เหมาะกับองค์ประกอบตกแต่ง

ฟีเจอร์หลัก

ตัวสร้างแบบเห็นภาพ

  • ตัวอย่างแบบสด
  • ลากจุดสีเพื่อปรับตำแหน่ง
  • ตัวเลือกสีพร้อมช่อง hex
  • สไลเดอร์มุมพร้อมปุ่มลัด
  • เพิ่มจุดสีได้ไม่จำกัด

ผลลัพธ์ CSS

  • สร้างโค้ด CSS แบบเรียลไทม์
  • คัดลอกค่า gradient หรือ property เต็ม
  • โค้ดสะอาดพร้อมใช้จริง
  • ใช้ syntax CSS3 มาตรฐาน
  • ใช้งานได้ในเบราว์เซอร์สมัยใหม่

Presets และแรงบันดาลใจ

  • ชุด gradient สวยๆ 12 แบบ
  • ธีม sunset, ocean และ cosmic
  • ตัวสุ่ม gradient
  • ครอบคลุม gradient ทั้งสามประเภท
  • โหลด preset ได้ในคลิกเดียว

ประโยชน์ด้านประสิทธิภาพ

  • ไม่ต้องใช้ไฟล์รูปภาพ
  • คมชัดทุกความละเอียด
  • ขนาดหน้าเล็กกว่าการใช้รูปภาพ
  • รองรับการเรนเดอร์ด้วย GPU
  • ลด HTTP requests

รูปแบบ CSS Gradient

/* Linear Gradient */

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

/* Radial Gradient */

background: radial-gradient(circle, #ff9a9e 0%, #fad0c4 100%);

/* Conic Gradient */

background: conic-gradient(from 0deg, #ff0000, #00ff00, #0000ff, #ff0000);

วิธีใช้เครื่องมือนี้

  1. เลือกประเภท: เลือก linear, radial หรือ conic gradient จากตัวเลือกประเภท
  2. ตั้งค่าทิศทาง: ปรับมุมสำหรับ linear/conic หรือเลือก circle/ellipse สำหรับ radial
  3. เพิ่มสี: ใช้ color picker หรือพิมพ์ค่า hex โดยตรง
  4. จัดตำแหน่งจุดสี: ลากจุดสีบนแถบ gradient หรือใช้สไลเดอร์
  5. เพิ่มจุดสี: เพิ่มสีอื่นๆ ลงใน gradient เมื่อจำเป็น
  6. ลอง Presets: โหลดสไตล์สำเร็จรูปเพื่อหาแรงบันดาลใจทันที
  7. คัดลอก CSS: คัดลอกค่า gradient หรือ CSS property เต็มไปยัง clipboard

คำแนะนำการออกแบบ Gradient

ใช้สีใกล้เคียงกัน: สีที่อยู่ติดกันบนวงล้อสีมักสร้าง gradient ที่กลมกลืนและนุ่มนวล

อย่าใช้จุดสีมากเกินไป: สองถึงสี่จุดสีมักให้ผลลัพธ์ที่สะอาด จุดสีมากเกินไปอาจทำให้ดูขุ่น

คำนึงถึง Contrast: ตรวจให้แน่ใจว่าข้อความยังอ่านง่ายบนพื้นหลัง gradient

Gradient แบบละเอียด: ความต่างของสีเล็กน้อยช่วยให้พื้นหลัง UI ดูเรียบหรูและมืออาชีพ

เทคนิค Overlay: วาง gradient โปร่งแสงทับรูปภาพเพื่อสร้าง hero section ที่มีมิติ

ความเข้ากันได้ของเบราว์เซอร์

Linear และ Radial Gradients: รองรับในเบราว์เซอร์สมัยใหม่ทั้งหมด เช่น Chrome, Firefox, Safari, Edge และ Opera

Conic Gradients: รองรับใน Chrome, Firefox, Safari และ Edge รุ่นปัจจุบัน ไม่รองรับใน IE

Vendor Prefixes: CSS gradients สมัยใหม่ไม่จำเป็นต้องใช้ vendor prefixes และใช้ syntax มาตรฐานได้กว้างขวาง

เหมาะสำหรับ

  • นักออกแบบเว็บ
  • นักพัฒนา Front-end
  • นักออกแบบ UI/UX
  • นักพัฒนา WordPress
  • นักออกแบบโซเชียลมีเดีย
  • ผู้ออกแบบเทมเพลตอีเมล
  • ผู้สร้าง Landing page
  • นักพัฒนาแอป
  • นักออกแบบแบรนด์
  • นักออกแบบกราฟิก
  • นักพัฒนา Full-stack
  • นักเรียนที่กำลังเรียน CSS

ปกป้องความเป็นส่วนตัวครบถ้วน

การสร้าง gradient ทั้งหมดทำงานในเบราว์เซอร์ของคุณด้วย JavaScript ไม่มีการส่งข้อมูลไปยังเซิร์ฟเวอร์ งานดีไซน์ของคุณจึงเป็นส่วนตัว

เครื่องมือดีไซน์และโค้ดที่เกี่ยวข้อง

Color Picker

เลือกสีและแปลงระหว่าง HEX, RGB, HSL และรูปแบบสีอื่นๆ

Image Editor

แก้ไขรูปภาพด้วยฟิลเตอร์ การปรับแต่ง crop และเครื่องมือดีไซน์อื่นๆ

CSS Minifier

ย่อโค้ด CSS รวมถึง gradients สำหรับใช้ใน production

Code Diff Checker

เปรียบเทียบไฟล์ CSS แบบ side-by-side เพื่อดูการเปลี่ยนแปลงของ gradient และโค้ดอื่นๆ

HTML Table Generator

สร้างตาราง HTML พร้อมพื้นหลัง gradient และสีที่ปรับแต่งเอง

64

Base64 Encoder

เข้ารหัสรูปภาพเป็น Base64 สำหรับใช้เป็น CSS background แบบ inline คู่กับ gradients