การไล่ระดับสีจะแสดงการผสมสีตั้งแต่สองสีขึ้นไป การไล่ระดับสีเชิงเส้นใช้เพื่อจัดเรียงสีตั้งแต่สองสีขึ้นไปในรูปแบบเชิงเส้น เช่น บนลงล่าง การไล่ระดับสีแบบเรเดียลจะปรากฏที่กึ่งกลาง
ต่อไปนี้เป็นรหัสที่แสดงการใช้การไล่ระดับสีเชิงเส้นและแนวรัศมีใน CSS3 -
ตัวอย่าง
<!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> ผลลัพธ์
รหัสข้างต้นจะสร้างผลลัพธ์ต่อไปนี้ -
