วิธีตั้งค่าสีพื้นหลังไล่ระดับสีด้วย CSS

ในการตั้งค่าสีพื้นหลังไล่ระดับสีด้วย CSS คุณต้องเพิ่ม linear-gradient() กับbackground .ของคุณ คุณสมบัติ.

มาสร้างคลาสบ็อกซ์ง่ายๆ กันเถอะ:

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

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

ผลลัพธ์:

คุณสามารถเปลี่ยนสีที่เริ่มต้นและสิ้นสุดได้ด้วยการเรียงลำดับใหม่ภายในฟังก์ชันการไล่ระดับสีเชิงเส้น:

/* Starting red, finishing yellow */
 background: linear-gradient(red, yellow);

เปลี่ยนมุม/การเอียงของเส้นตรง

ดังที่คุณเห็นในตัวอย่างด้านบน linear-gradient() ฟังก์ชั่นสร้างการไล่ระดับสีจากบนลงล่างโดยค่าเริ่มต้น คุณสามารถเปลี่ยนมุมการไล่ระดับสีเป็นสิ่งที่คุณต้องการได้อย่างง่ายดาย

ตัวอย่างเช่น นี่คือการไล่ระดับสีเชิงเส้นที่เอียง 45 องศา:

/* Starting yellow, finishing red */
linear-gradient(45deg, yellow, red);

ผลลัพธ์:

คุณสามารถใช้องศาใดก็ได้ตั้งแต่ 0 ถึง 360

ใช้ HEX, RGB หรือ RGBa สำหรับการไล่ระดับสีของคุณ

คุณสามารถใช้โมเดลสี HEX, RGB และ RGBa สำหรับการไล่ระดับสีเชิงเส้นได้ RGBa เป็นแบบยืดหยุ่นที่สุดที่ช่วยให้คุณใช้ช่องอัลฟ่า (เพื่อความโปร่งใส) ในการไล่ระดับสีเชิงเส้นของคุณ

ดังที่คุณเห็นด้านล่าง คุณสามารถสร้างสรรค์เท่าที่คุณต้องการด้วยการไล่ระดับสีของคุณเมื่อใช้ RGBa:

นี่คือ CSS สำหรับตัวอย่างการไล่ระดับสีเชิงเส้นด้านบน:

{
    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%);
}