Hàm linear-gradient() trong CSS

Hàm linear-gradient() trong CSS

Hàm linear-gradient() trong CSS dùng để phối các màu sắc từ hướng này đến hướng khác theo nhiều hướng khác nhau, chi tiết như nào hãy cùng chúng tôi phân tích:

Chức năng của Hàm linear-gradient() trong CSS

Hàm linear-gradient() trong CSS dùng để phối các màu sắc từ hướng này đến hướng khác theo nhiều hướng khác nhau, hàm này thường dùng trong các thuộc tính background-image, mask-image,...

Cú pháp của Hàm linear-gradient() trong CSS

background-image: linear-gradient(mau1, mau2,...)

mau1, mau2: Thêm nhiều màu sắc vào, bao nhiêu cũng được, mỗi màu cách nhau bằng dấu phẩy, vị trí mặc định từ trên xuống dưới.

background-image: linear-gradient(to vitri, mau1, mau2,...)

vitri: bottom, top, left, right và kết hợp 2 vị trí.

mau1, mau2: Thêm nhiều màu sắc vào, bao nhiêu cũng được, mỗi màu cách nhau bằng dấu phẩy.

background-image: linear-gradient(goc, mau1, mau2,...)

goc: Các góc như 180deg, 0deg, 90deg, 270deg.

mau1, mau2: Thêm nhiều màu sắc vào, bao nhiêu cũng được, mỗi màu cách nhau bằng dấu phẩy.

background-image: linear-gradient(to vitri, mau1 phantram, mau2 phantram,...)

vitri: bottom, top, left, right và kết hợp 2 vị trí.

mau1, mau2: Thêm nhiều màu sắc vào, bao nhiêu cũng được, mỗi màu cách nhau bằng dấu phẩy.

phantram: Số % màu đó chiếm, ví dụ 10%, 30%

Các cách xác định hướng trong Hàm linear-gradient() trong CSS

Theo từ khóa:

to bottom:  Từ trên xuống.

to top: Từ dưới lên trên.

to right: Từ trái qua phải.

to left: Từ phải qua trái.

to top left: Từ dưới phải lên trái trên.

to top right: Từ dưới trái lên phải trên.

to bottom right: Từ trái trên xuống phải dưới.

to bottom left: Từ phải trên xuống dưới trái.

Theo góc:

180deg:  Từ trên xuống.

0deg: Từ dưới lên trên.

90deg: Từ trái qua phải.

270deg: Từ phải qua trái.

Code Hàm linear-gradient() trong CSS

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

background-image: linear-gradient(to bottom, red, blue);
Từ trên xuống, chuyển từ màu đỏ sang màu xanh dương
background-image: linear-gradient(red, blue);
Mặc định là từ trên xuống, chuyển từ màu đỏ sang màu xanh dương
background-image: linear-gradient(to bottom, red, blue, green);
Từ trên xuống, chuyển từ màu đỏ sang màu xanh dương đến màu xanh lá cây
background-image: linear-gradient(180deg, red, blue);
Từ trên xuống, chuyển từ màu đỏ sang màu xanh dương

background-image: linear-gradient(to bottom, red 30%, blue 10%, green 60%);
Từ trên xuống, chuyển từ màu đỏ 30% sang màu xanh dương 10% đến màu xanh lá cây 60%

background-image: linear-gradient(to bottom, rgba(255,0,0,0), rgba(255,0,0,1));
Từ trên xuống, chuyển nền trong suốt từ 0.0 tới 1.0
mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
Từ trên xuống, chuyển từ vùng mờ sang trong suốt
<!DOCTYPE html>
<html>
<head>
<title>Hàm linear-gradient() từ trên xuống dướ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ên xuống dưới trong CSS</h1>

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

<h4>background-image: linear-gradient(red, blue); Mặc định là từ trên xuống, chuyển từ màu đỏ sang màu xanh dương</h4>
<div style="background-image: linear-gradient(red, blue);"></div>

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

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

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

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

<h4>mask-image: linear-gradient(to bottom, black 0%, transparent 100%); Từ trên xuống, chuyển từ vùng mờ sang trong suốt</h4>
<div style="mask-image: linear-gradient(to bottom, 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>

Chạy Thử

Hàm linear-gradient() từ dưới lên trên trong CSS

background-image: linear-gradient(to top, red, blue);
Từ dưới lên trên, chuyển từ màu đỏ sang màu xanh dương
background-image: linear-gradient(to top, red, blue, green);
Từ dưới lên trên, chuyển từ màu đỏ sang màu xanh dương đến màu xanh lá cây
background-image: linear-gradient(0deg, red, blue);
Từ dưới lên trên, chuyển từ màu đỏ sang màu xanh dương
background-image: linear-gradient(to top, red 30%, blue 10%, green 60%);
Từ dưới lên trên, chuyển từ màu đỏ 30% sang màu xanh dương 10% đến màu xanh lá cây 60%
background-image: linear-gradient(to top, rgba(255,0,0,0), rgba(255,0,0,1));
Từ dưới lên trên, chuyển nền trong suốt từ 0.0 tới 1.0
mask-image: linear-gradient(to top, black 0%, transparent 100%);
Từ dưới lên trên, chuyển từ vùng mờ sang trong suốt
<!DOCTYPE html>
<html>
<head>
<title>Hàm linear-gradient() từ dưới lên trên 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ừ dưới lên trên trong CSS</h1>

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

<h4>background-image: linear-gradient(to top, red, blue, green); Từ dưới lên trên, 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 top, red, blue, green);"></div>

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

<h4>background-image: linear-gradient(to top, red 30%, blue 10%, green 60%); Từ dưới lên trên, 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 top, red 30%, blue 10%, green 60%);"></div>

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

<h4>mask-image: linear-gradient(to top, black 0%, transparent 100%); Từ dưới lên trên, chuyển từ vùng mờ sang trong suốt</h4>
<div style="mask-image: linear-gradient(to top, 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>

Chạy Thử

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

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
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
background-image: linear-gradient(90deg, red, blue);
Từ trái qua phải, chuyển từ màu đỏ sang màu xanh dương
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%
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
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
<!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>

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

</body>
</html>

Chạy Thử

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

background-image: linear-gradient(to left, red, blue);
Từ phải qua trái, chuyển từ màu đỏ sang màu xanh dương
background-image: linear-gradient(to left, red, blue, green);
Từ phải qua trái, chuyển từ màu đỏ sang màu xanh dương đến màu xanh lá cây
background-image: linear-gradient(270deg, red, blue);
Từ phải qua trái, chuyển từ màu đỏ sang màu xanh dương
background-image: linear-gradient(to left, red 30%, blue 10%, green 60%);
Từ phải qua trái, chuyển từ màu đỏ 30% sang màu xanh dương 10% đến màu xanh lá cây 60%
background-image: linear-gradient(to left, rgba(255,0,0,0), rgba(255,0,0,1));
Từ phải qua trái, chuyển nền trong suốt từ 0.0 tới 1.0
mask-image: linear-gradient(to left, black 0%, transparent 100%);
Từ phải qua trái, chuyển từ vùng mờ sang trong suốt
<!DOCTYPE html>
<html>
<head>
<title>Hàm linear-gradient() từ phải qua 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 qua trái trong CSS</h1>

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

<h4>background-image: linear-gradient(to left, red, blue, green); Từ phải qua 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 left, red, blue, green);"></div>

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

<h4>background-image: linear-gradient(to left, red 30%, blue 10%, green 60%); Từ phải qua 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 left, red 30%, blue 10%, green 60%);"></div>

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

<h4>mask-image: linear-gradient(to left, black 0%, transparent 100%); Từ phải qua trái, chuyển từ vùng mờ sang trong suốt</h4>
<div style="mask-image: linear-gradient(to 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>

Chạy Thử

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

background-image: linear-gradient(to top left, red, blue);
Từ dưới phải lên trái trên, chuyển từ màu đỏ sang màu xanh dương
background-image: linear-gradient(to top left, red, blue, green);
Từ dưới phải lên trái trên, chuyển từ màu đỏ sang màu xanh dương đến màu xanh lá cây
background-image: linear-gradient(to top left, red 30%, blue 10%, green 60%);
Từ dưới phải lên trái trên, chuyển từ màu đỏ 30% sang màu xanh dương 10% đến màu xanh lá cây 60%

background-image: linear-gradient(to top left, rgba(255,0,0,0), rgba(255,0,0,1));
Từ dưới phải lên trái trên, chuyển nền trong suốt từ 0.0 tới 1.0
mask-image: linear-gradient(to top left, black 0%, transparent 100%);
Từ dưới phải lên trái trên, chuyển từ vùng mờ sang trong suốt
<!DOCTYPE html>
<html>
<head>
<title>Hàm linear-gradient() từ dưới phải lên trái trên 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ừ dưới phải lên trái trên trong CSS</h1>

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

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

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

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

<h4>mask-image: linear-gradient(to top left, black 0%, transparent 100%); Từ dưới phải lên trái trên, chuyển từ vùng mờ sang trong suốt</h4>
<div style="mask-image: linear-gradient(to top 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>

Chạy Thử

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

background-image: linear-gradient(to top right, red, blue);
Từ dưới trái lên phải trên, chuyển từ màu đỏ sang màu xanh dương
background-image: linear-gradient(to top right, red, blue, green);
Từ dưới trái lên phải trên, chuyển từ màu đỏ sang màu xanh dương đến màu xanh lá cây
background-image: linear-gradient(to top right, red 30%, blue 10%, green 60%);
Từ dưới trái lên phải trên, chuyển từ màu đỏ 30% sang màu xanh dương 10% đến màu xanh lá cây 60%
background-image: linear-gradient(to top right, rgba(255,0,0,0), rgba(255,0,0,1));
Từ dưới trái lên phải trên, chuyển nền trong suốt từ 0.0 tới 1.0
mask-image: linear-gradient(to top right, black 0%, transparent 100%);
Từ dưới trái lên phải trên, chuyển từ vùng mờ sang trong suốt
<!DOCTYPE html>
<html>
<head>
<title>Hàm linear-gradient() từ dưới trái lên phải trên 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ừ dưới trái lên phải trên trong CSS</h1>

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

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

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

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

<h4>mask-image: linear-gradient(to top right, black 0%, transparent 100%); Từ dưới trái lên phải trên, chuyển từ vùng mờ sang trong suốt</h4>
<div style="mask-image: linear-gradient(to top right, 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>

Chạy Thử

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

background-image: linear-gradient(to bottom right, red, blue);
Từ trái trên xuống phải dưới, chuyển từ màu đỏ sang màu xanh dương
background-image: linear-gradient(to bottom right, red, blue, green);
Từ trái trên xuống phải dưới, chuyển từ màu đỏ sang màu xanh dương đến màu xanh lá cây

background-image: linear-gradient(to bottom right, red 30%, blue 10%, green 60%);
Từ trái trên xuống phải dưới, chuyển từ màu đỏ 30% sang màu xanh dương 10% đến màu xanh lá cây 60%
background-image: linear-gradient(to bottom right, rgba(255,0,0,0), rgba(255,0,0,1));
Từ trái trên xuống phải dưới, chuyển nền trong suốt từ 0.0 tới 1.0
mask-image: linear-gradient(to bottom right, black 0%, transparent 100%);
Từ trái trên xuống phải dưới, chuyển từ vùng mờ sang trong suốt
<!DOCTYPE html>
<html>
<head>
<title>Hàm linear-gradient() từ trái trên xuống phải dướ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 trên xuống phải dưới trong CSS</h1>

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

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

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

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

<h4>mask-image: linear-gradient(to bottom right, black 0%, transparent 100%); Từ trái trên xuống phải dưới, chuyển từ vùng mờ sang trong suốt</h4>
<div style="mask-image: linear-gradient(to bottom right, 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>

Chạy Thử

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

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
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
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%
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
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
<!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>

Chạy Thử

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Hàm linear-gradient() trong CSS.

  • 0 Bình luận
CEO Bùi Tấn Lực
Bùi Tấn Lực
CEO Bùi Tấn Lực người sáng lập ra Web Mới, là một lập trình viên website, người viết content, chuyên tư vấn các vấn đề về website và SEO website
  • Zalo
Chia sẻ nội dung đánh giá của bạn về Hàm linear-gradient() trong CSS
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
Đánh giá của bạn
Tên *
Email
Số điện thoại *
Bình luận, Hỏi đáp
Đăng ký tư vấn thiết kế website
Tìm hiểu 1 năm không bằng lắng nghe 1 câu tư vấn