การตั้งค่า Radial Gradient เป็นภาพพื้นหลังด้วย CSS

ใช้ฟังก์ชัน radial-gradient() เพื่อสร้างไล่สีแบบรัศมี (radial gradient) เป็นภาพพื้นหลัง โดยสีจะกระจายจากจุดศูนย์กลางไปรอบข้าง

ตัวอย่างโค้ด

<!DOCTYPE html>
<html>
<head>
  <style>
    #demo {
      height: 200px;
      background: radial-gradient(green, orange, maroon);
    }
  </style>
</head>
<body>
  <p>Setting background as radial gradient.</p>
  <div id="demo"></div>
</body>
</html>

รูปแบบไวยากรณ์เต็ม:

radial-gradient(shape size at position, start-color, ..., last-color)

• shape: circle หรือ ellipse (default)
• size: closest-side, farthest-corner, cover, contain หรือค่าความยาว
• position: ตำแหน่งจุดศูนย์กลาง เช่น center, top left, 50% 50%

ตัวอย่างขั้นสูง: radial-gradient(circle at top left, yellow, orange, red) - วงกลมที่มุมซ้ายบน ไล่สีจากเหลือง ส้ม แดง