สำหรับ Radial Gradients ให้ตั้งค่า Color Stops รูปทรงเริ่มต้นคือ Ellipse แต่สามารถตั้งค่ารูปทรงอื่นได้ เช่น circle ต้องตั้งค่า Color Stops อย่างน้อย 2 สีสำหรับ Radial Gradients ใน CSS
นี่คือโค้ดสำหรับการสร้างไล่สีแบบรัศมีโดยใช้ CSS −
ตัวอย่าง
<!DOCTYPE html> <html> <head> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } #radial { height: 200px; width: 200px; background-image: radial-gradient( rgb(255, 0, 106), rgb(2, 0, 128), rgb(0, 255, 42) ); } </style> </head> <body> <h1>Radial Gradient Example</h1> <div id="radial"></div> </body> </html>
ผลลัพธ์
โค้ดด้านบนจะแสดงผลดังนี้ −
