Gradient tuyến tính () được sử dụng để xác định gradient tuyến tính làm hình nền -
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
Ở trên, đặt điểm bắt đầu và hướng, với màu đó sẽ dừng lại để hiển thị chuyển tiếp mượt mà.
Ví dụ
Bây giờ chúng ta hãy xem một ví dụ để triển khai linear-gradient () -
<!DOCTYPE html>
<html>
<head>
<style>
div {
text-align: justify;
text-justify: inter-word;
color: white;
background-image: linear-gradient(to bottom right, red , blue);
position: absolute;
right: 90px;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<div>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. </div>
</body>
</html> Đầu ra
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: linear-gradient(to right, yellow,orange,yellow,green,blue,indigo,violet);
}
.demo {
text-decoration: overline;
text-decoration-color: yellow;
font-size: 1.3em;
}
</style>
</head>
<body>
<h1>Examination Details</h1>
<p class="demo">Exam on 20th December.</p>
<p class="demo2">Exam begins at 9AM.</p>
</body>
</html> Đầu ra
