ReSuMeYaDev

เครื่องมือออกแบบ

Gradient Generator — สีไล่ระดับ CSS

สร้าง CSS Gradient ทั้ง Linear และ Radial — เพิ่มสีได้หลายจุด ปรับทิศทางแบบลากเลื่อน พร้อม preview สดและ copy CSS code ไปใช้ได้ทันที

  • ใช้งานฟรี
  • Linear/Radial
  • คัดลอก CSS
  • รองรับมือถือ

คำจำกัดความ

CSS Gradient คืออะไร?

CSS Gradient คือการไล่ระดับสี ใช้สร้างพื้นหลังที่สวยงามโดยไม่ต้องใช้รูปภาพ ช่วยให้เว็บโหลดเร็วขึ้นและปรับขนาดได้ไม่จำกัด

Gradient มี 2 แบบหลัก: Linear Gradient (ไล่ระดับเส้นตรง) และ Radial Gradient (ไล่ระดับวงกลม) สามารถใช้สี 2 สีขึ้นไป

ประเภท

ประเภท Gradient

  • Linear Gradient — ไล่ระดับเส้นตรง กำหนดทิศทางได้ (ซ้ายไปขวา, บนลงล่าง, มุมเฉียง)
  • Radial Gradient — ไล่ระดับจากจุดศูนย์กลางออกรอบนอก เป็นวงกลมหรือวงรี

กรณีใช้งาน

กรณีใช้งานจริง

  • ออกแบบ Hero Section ของ Landing Page ที่ดึงดูดสายตาโดยไม่ต้องใช้ไฟล์รูปภาพหนัก
  • สร้างพื้นหลัง Header ของอีเมลที่แสดงผลสม่ำเสมอบนทุก Email Client และอุปกรณ์
  • สร้าง Gradient Overlay แบบเคลื่อนไหวบนส่วนวิดีโอสำหรับเว็บผลิตภัณฑ์ SaaS
  • ทำพื้นหลังโพสต์ Social Media ด้วยการไล่สีตามแบรนด์สำหรับ Instagram และ LinkedIn Stories
  • ตกแต่ง Pricing Card ด้วยขอบ Gradient แบบนุ่มนวลเพื่อเน้นแพ็คเกจที่แนะนำ

เคล็ดลับ

เคล็ดลับและแนวปฏิบัติที่ดี

  • จำกัด Color Stop ไว้ 2-3 จุดเพื่อผลลัพธ์ที่สะอาดตา จำนวนมากเกินไปทำให้สีขุ่นมัว
  • ใช้ Gradient แบบกึ่งโปร่งใสวางทับรูปภาพเพื่อให้ข้อความอ่านง่ายโดยไม่บังภาพทั้งหมด
  • เพิ่ม Vendor Prefix หรือใช้ Autoprefixer เพื่อรองรับ Safari และ Firefox เวอร์ชันเก่า
  • ผสม CSS Gradient กับ background-size และ background-position เพื่อสร้างลายทางแบบซ้ำ
  • ทดสอบ Gradient บนจอ OLED และ LCD เพราะความสดใสของสีแตกต่างกันมากตามชนิดจอ

หลีกเลี่ยง

ข้อผิดพลาดที่พบบ่อย

  • ใช้สีตรงข้ามคอนทราสต์สูง เช่น แดงไปเขียว ที่สร้างเอฟเฟกต์สั่นไหวน่ารำคาญ
  • ลืมตั้ง background-color แบบ Solid สำรอง สำหรับเบราว์เซอร์ที่ไม่รองรับ CSS Gradient
  • ใส่ Gradient บน Element ขนาดเล็กมาก ซึ่งมองไม่เห็นการไล่สีและเปลือง Rendering
  • ใช้ Gradient มากเกินไปทุก UI Component ทำให้ดีไซน์ดูรก ไม่เป็นมืออาชีพ

เปรียบเทียบ

เปรียบเทียบกับเครื่องมืออื่น

ต่างจาก Figma หรือ Sketch ที่ต้องใช้โปรแกรมออกแบบ เครื่องมือนี้สร้าง CSS Gradient พร้อมใช้งานได้เลยในเบราว์เซอร์ ดูตัวอย่างสดและคัดลอกด้วยคลิกเดียว

เมื่อเทียบกับ cssgradient.io เครื่องมือนี้รองรับ Multi-stop Gradient พร้อมปุ่มเพิ่ม/ลบ รองรับ Radial Gradient และทำงาน Offline ได้หลังโหลดหน้าเว็บ

FAQ

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

01 ใช้ CSS Gradient อย่างไร?

คัดลอก CSS code ที่สร้างได้ แล้ววางใน property background หรือ background-image ของ CSS element ที่ต้องการ

02 เพิ่มสีมากกว่า 2 สีได้ไหม?

ได้ กดปุ่ม 'เพิ่มสี' เพื่อเพิ่ม Color Stop ใหม่ CSS Gradient รองรับหลายสีได้ไม่จำกัด

03 Linear กับ Radial ต่างกันอย่างไร?

Linear Gradient ไล่ระดับเป็นเส้นตรง ส่วน Radial Gradient ไล่ระดับจากจุดศูนย์กลางเป็นวงกลม

04 Gradient ใช้กับข้อความได้ไหม?

ได้ ใช้ background-clip: text และ -webkit-background-clip: text ร่วมกับ color: transparent ใน CSS

05 ข้อมูลถูกส่งไปเซิร์ฟเวอร์หรือไม่?

ไม่ ทุกอย่างทำงานบนเบราว์เซอร์ของคุณ ไม่มีข้อมูลถูกส่งออกไป

06 สร้าง Gradient มุม 45 องศาได้อย่างไร?

เลือกทิศทางแบบมุมเฉียง จากนั้นแก้ CSS ที่ได้จาก 'to bottom right' เป็น '45deg' เพื่อกำหนดมุมที่แม่นยำ

07 ใช้ Gradient เป็นสีขอบ (Border) ได้ไหม?

ได้ ใช้ border-image หรือสร้าง Wrapper Element ที่มี Gradient เป็นพื้นหลังแล้วเว้น Padding เพื่อจำลองขอบ Gradient ใน CSS

08 CSS Gradient ทำให้เว็บโหลดช้าไหม?

ไม่ CSS Gradient ถูก Render โดย GPU ของเบราว์เซอร์ เร็วกว่าโหลดไฟล์ภาพมาก และปรับขนาดได้สมบูรณ์ทุก Resolution

อ้างอิง

  1. MDN Web Docs — CSS Gradients (developer.mozilla.org)
  2. CSS-Tricks — A Complete Guide to CSS Gradients (css-tricks.com)
  3. Can I Use — CSS Gradients Browser Support (caniuse.com)

เครื่องมือนี้ทำงานบนเบราว์เซอร์ ไม่มีการส่งข้อมูลไปเซิร์ฟเวอร์ CSS code ที่สร้างได้รองรับทุกเบราว์เซอร์สมัยใหม่

ออกแบบ

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

เครื่องมือคำนวณฟรีอื่น ๆ ที่คุณอาจสนใจ

ดูทั้งหมดในหมวดนี้

ต้องการเครื่องมือคำนวณสำหรับธุรกิจของคุณ?

ReSuMeYaDev รับพัฒนาเว็บไซต์ เครื่องมือคำนวณ และระบบภายในตามความต้องการ — Laravel, Vue, Nuxt, Go, Rust

ดูบริการของเรา