Hàm linear-gradient() trong CSS

Bùi Tấn Lực
1076
17/10/2025

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ử

Ứng dụng Hàm linear-gradient() trong CSS

Hàm linear-gradient() không chỉ dùng để tạo nền chuyển màu. Khi kết hợp đúng với các thuộc tính CSS khác, hiệu ứng chuyển màu có thể được đưa vào nhiều thành phần của giao diện, từ khu vực nội dung, hình ảnh cho đến các nút tương tác.

Tạo nền chuyển màu cho phần tử

Đây là cách sử dụng phổ biến nhất của linear-gradient(). Thay vì dùng một màu nền đơn sắc, bạn có thể tạo sự chuyển tiếp giữa hai hoặc nhiều màu để phần tử có chiều sâu và nổi bật hơn.

.box {
    background: linear-gradient(135deg, #1e3a8a, #38bdf8);
}

Góc chuyển màu có thể thay đổi tùy bố cục. Chẳng hạn, hướng 135deg tạo cảm giác chuyển màu theo đường chéo, phù hợp với các khối nổi bật, tiêu đề hoặc khu vực giới thiệu trên trang.

Đối với giao diện cần sự tiết chế, nên chọn các màu có độ tương đồng nhất định thay vì sử dụng quá nhiều màu tương phản. Gradient càng đơn giản thì càng dễ phối hợp với nội dung và các thành phần khác.

Tạo hiệu ứng phủ màu trên hình ảnh

linear-gradient() có thể được đặt cùng hình ảnh trong background để tạo một lớp màu phủ. Cách này đặc biệt hữu ích khi cần đặt chữ trực tiếp lên ảnh nhưng vẫn muốn đảm bảo khả năng đọc.

.banner {
    background-image:
        linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.75)),
        url("banner.jpg");
}

Lớp gradient có thể trong suốt ở vùng phía trên và đậm dần về phía dưới, giúp phần chữ đặt ở cuối hình ảnh dễ nhìn hơn mà không cần chỉnh sửa trực tiếp ảnh gốc.

Ưu điểm của phương pháp này là hiệu ứng phủ màu được kiểm soát hoàn toàn bằng CSS. Khi thay đổi hình ảnh hoặc nội dung, bạn vẫn có thể giữ nguyên cách xử lý mà không phải tạo thêm một phiên bản ảnh riêng.

Tạo nút và giao diện nổi bật bằng linear-gradient()

Gradient có thể giúp các nút, thẻ thông tin hoặc khu vực kêu gọi hành động trở nên nổi bật hơn màu nền thông thường. Tuy nhiên, hiệu quả tốt nhất thường đến từ sự chuyển màu nhẹ và có chủ đích.

.button {
    background: linear-gradient(90deg, #2563eb, #7c3aed);
}

Khi kết hợp với trạng thái hover, có thể thay đổi hướng hoặc vị trí màu để tạo cảm giác chuyển động mà không cần sử dụng hình ảnh.

.button:hover {
    background: linear-gradient(90deg, #7c3aed, #2563eb);
}

Cách này phù hợp với các nút cần thu hút sự chú ý, nhưng không nên áp dụng gradient quá mạnh cho mọi thành phần. Nếu toàn bộ giao diện đều sử dụng chuyển màu nổi bật, các khu vực quan trọng sẽ mất đi sự phân cấp thị giác.

Kết hợp linear-gradient() với background-image và các thuộc tính CSS khác

Một điểm mạnh của linear-gradient() là có thể hoạt động cùng nhiều lớp nền trong cùng một phần tử. Bạn có thể đặt gradient phía trên hình ảnh, kết hợp nhiều gradient hoặc điều khiển cách hiển thị bằng các thuộc tính như background-size, background-position và background-repeat.

.card {
    background-image:
        linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent),
        url("background.jpg");
    background-size: cover;
    background-position: center;
}

Thứ tự các lớp nền rất quan trọng: lớp được khai báo trước sẽ nằm phía trên lớp được khai báo sau. Nhờ đó, gradient có thể đóng vai trò như một lớp điều chỉnh ánh sáng, tạo vùng nhấn hoặc làm nổi bật nội dung mà không cần thay đổi hình ảnh gốc.

Khi xây dựng giao diện thực tế, nên xem linear-gradient() như một lớp hiệu ứng có thể phối hợp với các thành phần nền khác, thay vì chỉ coi nó là một cách thay thế cho màu nền đơn sắc.

Lời kết

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

★★★★★ ★★★★★
5/5 - (1 Đánh giá)
0 Bình luận

Bùi Tấn Lực

Tìm hiểu về CEO Bùi Tấn Lực, Founder Web Mới với nhiều năm kinh nghiệm trong lĩnh vực phát triển website, SEO và chia sẻ kiến thức công nghệ

Đánh giá

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 *

Bình luận, Hỏi đáp

Yêu Cầu Báo Giá

Gửi trang web mẫu cần làm theo, chúng tôi sẽ báo giá đến bạn từ Email (tanlucit09@gmail.com - Bùi Tấn Lực) hoặc Zalo (Lực IT - 0398259259) !