การใช้งาน CSS3 Linear และ Radial Gradients

Linear vs Radial Gradient: ความแตกต่างและการใช้งาน

Linear Gradient: ไล่สีตามเส้นตรง (ทิศทางระบุได้) Radial Gradient: ไล่สีจากจุดศูนย์กลางขยายออกเป็นวงกลม/ไข่

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

<!DOCTYPE html>
<html>
<head>
  <style>
    body{ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
    .linearGradient {
      height: 100px; width: 300px;
      background-image: linear-gradient(rgb(255, 0, 200), yellow);
    }
    .radialGradient {
      height: 200px; width: 200px;
      background-image: radial-gradient(rgb(255, 0, 200), yellow);
    }
  </style>
</head>
<body>
  <h2>Linear Gradient</h2> <div class="linearGradient"></div>
  <h2>Radial Gradient</h2> <div class="radialGradient"></div>
</body>
</html>

Radial Gradient Syntax

radial-gradient(shape size at position, color-stop1, color-stop2, ...)
/* Shape */
circle | ellipse (default)
/* Size */
closest-side | farthest-side | closest-corner | farthest-corner (default) | length | %
/* Position */
at center | at top left | at 50% 50% | at 100px 50px

ตัวอย่าง Radial Gradient 進階

.radial-advanced {
  background: radial-gradient(
    ellipse farthest-corner at 20% 30%,  /* ทรง ellipse ขนาดใหญ่ สูงสุด มุมซ้ายบน */
    #ff6b6b, #feca57, #48dbfb, #1dd1a1
  );
}

Conic Gradient (เพิ่มเติม)

.conic {
  background: conic-gradient(from 0deg, red, yellow, lime, aqua, blue, magenta, red);
  border-radius: 50%; /* Color wheel */
}

Browser Support

ทั้ง Linear, Radial, Conic รองรับทุก browser สมัยใหม่ (IE 10+ linear/radial, Conic: Chrome 69+, Firefox 83+, Safari 12.2+)