วิธีตั้งค่า Gradient Background Color ด้วย CSS

เพื่อตั้งค่า gradient background ใน CSS ให้เพิ่มฟังก์ชัน linear-gradient() ในคุณสมบัติ background

ลองสร้าง box class ทดสอบ:

<div class="box"></div>

.box { width: 200px; height: 200px; background: linear-gradient(yellow, red); }

ผลลัพธ์:

สลับลำดับสีใน linear-gradient เพื่อเปลี่ยนสีเริ่มต้นและจบ:

/* เริ่มแดง จบเหลือง */ background: linear-gradient(red, yellow);

เปลี่ยนมุม/ความเอียงของ Linear Gradient

ค่า default คือ top to bottom เปลี่ยนมุมได้ง่าย:

ตัวอย่าง linear gradient กระโดด 45 องศา:

/* เริ่มเหลือง จบแดง */ linear-gradient(45deg, yellow, red);

ผลลัพธ์:

ใช้องศาได้ 0-360

ใช้ HEX, RGB, หรือ RGBa สำหรับ Gradient

ใช้โมเดลสี HEX, RGB, RGBa ได้ทั้งหมด RGBa ยืดหยุ่นสุดเพราะใช้ alpha channel (transparency) ได้

ดูตัวอย่างด้านล่าง สร้างสรรค์ได้มากมายกับ RGBa:

CSS สำหรับ linear-gradient ตัวอย่าง:

{ background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%), linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%), linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%); }