สร้าง Gradient สีไล่ระดับ ออนไลน์

ตัวอย่าง Gradient

ทิศทาง

สี

CSS Code

background: linear-gradient(to right, #3B82F6, #8B5CF6);

CSS Gradient คืออะไร?

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

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

ประเภท Gradient

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

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

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

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

tools.gradient.info.useCases.content

ออกแบบ Hero Section ของ Landing Page ที่ดึงดูดสายตาโดยไม่ต้องใช้ไฟล์รูปภาพหนัก

สร้างพื้นหลัง Header ของอีเมลที่แสดงผลสม่ำเสมอบนทุก Email Client และอุปกรณ์

สร้าง Gradient Overlay แบบเคลื่อนไหวบนส่วนวิดีโอสำหรับเว็บผลิตภัณฑ์ SaaS

ทำพื้นหลังโพสต์ Social Media ด้วยการไล่สีตามแบรนด์สำหรับ Instagram และ LinkedIn Stories

ตกแต่ง Pricing Card ด้วยขอบ Gradient แบบนุ่มนวลเพื่อเน้นแพ็คเกจที่แนะนำ

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

tools.gradient.info.tips.content

จำกัด Color Stop ไว้ 2-3 จุดเพื่อผลลัพธ์ที่สะอาดตา จำนวนมากเกินไปทำให้สีขุ่นมัว

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

เพิ่ม Vendor Prefix หรือใช้ Autoprefixer เพื่อรองรับ Safari และ Firefox เวอร์ชันเก่า

ผสม CSS Gradient กับ background-size และ background-position เพื่อสร้างลายทางแบบซ้ำ

ทดสอบ Gradient บนจอ OLED และ LCD เพราะความสดใสของสีแตกต่างกันมากตามชนิดจอ

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

tools.gradient.info.commonMistakes.content

ใช้สีตรงข้ามคอนทราสต์สูง เช่น แดงไปเขียว ที่สร้างเอฟเฟกต์สั่นไหวน่ารำคาญ

ลืมตั้ง background-color แบบ Solid สำรอง สำหรับเบราว์เซอร์ที่ไม่รองรับ CSS Gradient

ใส่ Gradient บน Element ขนาดเล็กมาก ซึ่งมองไม่เห็นการไล่สีและเปลือง Rendering

ใช้ Gradient มากเกินไปทุก UI Component ทำให้ดีไซน์ดูรก ไม่เป็นมืออาชีพ

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

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

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

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

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

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

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

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

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

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

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

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

อ้างอิง

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

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

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

เลือกสี Color Picker

เลือกสีออนไลน์ แปลง HEX RGB HSL คัดลอกโค้ดสีไปใช้ได้ทันที

สร้างชุดสี Palette

สร้างชุดสี Color Palette อัตโนมัติ Complementary Analogous Triadic

คำนวณ BMI

คำนวณค่าดัชนีมวลกาย (BMI) เพื่อประเมินรูปร่างและความเสี่ยงด้านสุขภาพ

ดูเครื่องมือสี/ดีไซน์ทั้งหมด