Hàm linear-gradient() từ phải trên xuống dưới trái trong CSS

Hàm linear-gradient() từ phải trên xuống dưới trái trong CSS

Hàm linear-gradient() từ phải trên xuống dưới trái trong CSS

Tự code rồi chạy thử... Chạy Thử 
<!DOCTYPE html>
<html>
<head>
<title>Hàm linear-gradient() từ phải trên xuống dưới trá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ừ phải trên xuống dưới trái trong CSS</h1>

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

<h4>background-image: linear-gradient(to bottom left, red, blue, green); Từ phải trên xuống dưới trá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 bottom left, red, blue, green);"></div>

<h4>background-image: linear-gradient(to bottom left, red 30%, blue 10%, green 60%); Từ phải trên xuống dưới trá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 bottom left, red 30%, blue 10%, green 60%);"></div>

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

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

<p>Hình gốc</p>
<img src="https://webmoi.vn/thumuc/thien-nhien.jpg" style="width:100%;height:auto">

</body>
</html>
Hàm linear-gradient() từ phải trên xuống dưới trái trong CSS nằm trong bài viết Hàm linear-gradient() trong CSS