Hàm linear-gradient() là một hàm dựng sẵn trong CSS. Nó được dùng để đặt linear gradient làm ảnh nền.
Cú pháp:
background-image: linear-gradient( direction, color1, color2, ... )
Tham số: Hàm này chấp nhận một tham số direction và nhiều tham số color như sau:
- direction: Tham số này định nghĩa điểm bắt đầu và hướng của hiệu ứng gradient.
- color1, color2, ...: Tham số này giữ giá trị màu, theo sau là vị trí dừng tùy chọn.
Các ví dụ dưới đây minh họa hàm linear-gradient() trong CSS:
Ví dụ 1: Trong ví dụ này phần tử .gradient áp dụng nền linear gradient từ xanh lá cây sang vàng sang xanh lam. Văn bản được căn giữa phía trên.
html<!DOCTYPE html>
<html>
<head>
<title>linear-gradient function</title>
<style>
.gradient {
height: 100px;
background-image:
linear-gradient(green, yellow, blue);
Text-align: center;
padding-top: 40px;
font-size: 40px;
color: white;
font-weight: bold;
}
h2 {
text-align: center;
}
</style>
</head>
<body>
<h2>linear-gradient: Top to Bottom property</h2>
<div class="gradient">GeeksforGeeks</div>
</body>
</html>
Output:
Ví dụ 2: Phần tử .gradient áp dụng nền linear gradient từ phải sang trái. Màu sắc chuyển từ xanh lá cây sang vàng sang xanh lam.
html<!DOCTYPE html>
<html>
<head>
<title>linear-gradient function</title>
<style>
.gradient {
height: 100px;
background-image:
linear-gradient(to left, green, yellow, blue);
Text-align: center;
padding-top: 40px;
font-size: 40px;
color: white;
font-weight: bold;
}
h2 {
text-align: center;
}
</style>
</head>
<body>
<h2>
linear-gradient: Right to Left property
</h2>
<div class="gradient">
GeeksforGeeks
</div>
</body>
</html>
Output:
Trình duyệt được hỗ trợ:
- Google Chrome 26
- Edge 12
- Microsoft Edge 12
- Firefox 16
- Opera 12.1
- Safari 7