สร้าง Radial Gradient รูปวงกลมด้วย CSS

เพื่อสร้าง Radial Gradient รูปวงกลม ให้ระบุคีย์เวิร์ด circle ในฟังก์ชัน radial-gradient()

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

ลองรันโค้ดด้านล่าง ตั้งค่ารูปร่างเป็นวงกลมใน radial gradient:

<!DOCTYPE html>
<html>
<head>
  <style>
    #demo {
      height: 400px;
      background: radial-gradient(circle, red, blue, yellow);
    }
  </style>
</head>
<body>
  <h2>Radial Gradient</h2>
  <div id="demo">Radial Gradients</div><br>
</body>
</html>

คำอธิบาย: radial-gradient(circle, red, blue, yellow) บังคับให้ gradient เป็นวงกลมสมบูรณ์ (circle) แทนที่จะเป็น ellipse (ค่าเริ่มต้นที่ขึ้นอยู่กับอัตราส่วนกว้าง-สูงของกล่อง) สีจะกระจายจากศูนย์กลางออกไป: แดง → น้ำเงิน → เหลือง