การสร้าง CSS gradient สำหรับพื้นหลังเว็บไซต์และ UI ทำได้ทันทีด้วยเครื่องมือออนไลน์ฟรีนี้ ไม่ต้องสมัครสมาชิก
CSS Gradient คืออะไร?
CSS Gradient คือการไล่สีที่สร้างด้วยโค้ด CSS โดยไม่ต้องใช้รูปภาพ ทำให้โหลดเร็วและปรับขนาดได้ไม่จำกัด รูปแบบหลักคือ linear-gradient (ไล่สีตามทิศทาง) และ radial-gradient (ไล่สีจากศูนย์กลาง)
วิธีสร้าง CSS Gradient
- เลือกสีเริ่มต้นและสีสิ้นสุด
- กำหนดมุม (angle) หรือทิศทาง
- ดูตัวอย่างแบบ live
- คัดลอกโค้ด CSS ที่พร้อมใช้งาน
ทำงานในเบราว์เซอร์ ไม่ต้องสมัครสมาชิก
กรณีการใช้งาน
- เว็บไซต์ - สร้างพื้นหลัง hero section ที่สวยงาม
- ปุ่ม - ทำปุ่ม call-to-action ที่ดึงดูดสายตา
- การ์ด - เพิ่ม gradient ให้กับ card components
- โลโก้ - สร้างตัวอักษรที่มีการไล่สี
- Social Media - ออกแบบ thumbnail ที่น่าสนใจ
คำถามที่พบบ่อย
Gradient มีกี่สีได้บ้าง? CSS gradient รองรับได้หลายสีมาก สามารถเพิ่ม color stops ได้ไม่จำกัด
linear-gradient กับ radial-gradient ต่างกันอย่างไร? linear-gradient ไล่สีตามเส้นตรง ส่วน radial-gradient ไล่สีจากจุดศูนย์กลางออกไปเป็นวงกลม
รองรับ browser ไหนบ้าง? CSS gradient รองรับ browser ทุกตัวในปัจจุบัน รวมถึง Chrome, Firefox, Safari และ Edge
ใช้ gradient เป็น background-image ได้ไหม?
ใช่ background-image: linear-gradient(...) คือวิธีมาตรฐานที่ใช้กัน