Tự code rồi chạy thử... Chạy Thử

<!DOCTYPE html>
<html>
<head>
<title>Hàm linear-gradient() từ trái qua phải trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
div {width:100%; float: left; height:100px; margin-bottom:10px}
h4{margin:0px;padding:0px}
</style>
</head>
<body>

<h1>Hàm linear-gradient() từ trái qua phải trong CSS</h1>

<h4>background-image: linear-gradient(to right, red, blue); Từ trái qua phải, chuyển từ màu đỏ sang màu xanh dương</h4>
<div style="background-image: linear-gradient(to right, red, blue);"></div>

<h4>background-image: linear-gradient(to right, red, blue, green); Từ trái qua phải, chuyển từ màu đỏ sang màu xanh dương đến màu xanh lá cây</h4>
<div style="background-image: linear-gradient(to right, red, blue, green);"></div>

<h4>background-image: linear-gradient(90deg, red, blue); Từ trái qua phải, chuyển từ màu đỏ sang màu xanh dương</h4>
<div style="background-image: linear-gradient(90deg, red, blue);"></div>

<h4>background-image: linear-gradient(to right, red 30%, blue 10%, green 60%); Từ trái qua phải, chuyển từ màu đỏ 30% sang màu xanh dương 10% đến màu xanh lá cây 60%</h4>
<div style="background-image: linear-gradient(to right, red 30%, blue 10%, green 60%);"></div>

<h4>background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); Từ trái qua phải, chuyển nền trong suốt từ 0.0 tới 1.0</h4>
<div style="background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));"></div>

<h4>mask-image: linear-gradient(to right, black 0%, transparent 100%); Từ trái qua phải, chuyển từ vùng mờ sang trong suốt</h4>
<div style="mask-image: linear-gradient(to right, black 0%, transparent 100%);height:auto">
<img src="https://webmoi.vn/thumuc/thien-nhien.jpg" style="width:100%;height:auto">
</div>

</body>
</html>

Hàm linear-gradient() từ trái qua phải trong CSS nằm trong bài viết Hàm linear-gradient() trong CSS