Hàm radial-gradient() trong CSS
Bùi Tấn Lực - 1471
- 18/10/2025
Chức năng của Hàm radial-gradient() trong CSS
Hàm radial-gradient() trong CSS dùng để pha các màu tại tâm điểm ra xung quanh, hình dạng là hình tròn hoặc hình ellipse, hàm này thường sử dụng với các thuộc tính background-image, mask,...
Cú pháp của Hàm radial-gradient() trong CSS
background-image: radial-gradient(hinhdang loaikichthuoc at vitri, mau1, mau2,...);
hinhdang: Là hình dạng, circle (hình tròn) hoặc ellipse (hình elip - mặc định).
loaikichthuoc: Loại kích thước, farthest-corner (mặc định), farthest-side, closest-corner, hoặc closest-side.
vitri: Vị trí, giá trị mặc định là center, nhưng bạn có thể sử dụng các đơn vị như pixel (px) hoặc phần trăm (%), hoặc top, left, right, bottom.
mau1, mau2,....: Bạn có thể thêm nhiều màu, bạn phải thêm 2 màu trở lên, màu 1 từ tâm ra ngoài đến màu 2.
Code Hàm radial-gradient() trong CSS
Hàm radial-gradient() circle (hình tròn) trong CSS
background-image: radial-gradient(circle at center, red, blue);
Hình tròn, vị trí tâm ở giữa, chuyển từ màu đỏ sang màu xanh dương
background-image: radial-gradient(circle closest-side at center, red, blue, green);
Hình tròn, loại kích thước closest-side, vị trí tâm ở giữa, chuyển từ màu đỏ sang màu xanh dương sau đó đến màu xanh lá cây
background-image: radial-gradient(circle at left, red, blue, green);
Hình tròn, vị trí tâm nằm bên trái, chuyển từ màu đỏ sang màu xanh dương sau đó đến màu xanh lá cây
background-image: radial-gradient(circle at center, red 10%, blue, green);
Hình tròn, vị trí tâm nằm ở giữa, chuyển từ màu đỏ (10%) sang màu xanh dương sau đó đến màu xanh lá cây
mask: radial-gradient(circle at center, black 50%, rgba(0, 0, 0, 0.5) 50%);
Hình tròn, vị trí ở giữa, chuyển từ vùng mờ sang trong suốt
<!DOCTYPE html>
<html>
<head>
<title>Hàm radial-gradient() circle (hình tròn) trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
div {width:200px; float: left; height:150px; margin-bottom:10px; margin-right:10px}
h4{margin:0px;padding:0px}
hr {width:100%}
</style>
</head>
<body>
<h1>Hàm radial-gradient() circle (hình tròn) trong CSS</h1>
<h4>background-image: radial-gradient(circle at center, red, blue); Hình tròn, vị trí tâm ở giữa, chuyển từ màu đỏ sang màu xanh dương</h4>
<div style="background-image: radial-gradient(circle at center, red, blue);"></div><hr>
<h4>background-image: radial-gradient(circle closest-side at center, red, blue, green); Hình tròn, loại kích thước closest-side, vị trí tâm ở giữa, chuyển từ màu đỏ sang màu xanh dương sau đó đến màu xanh lá cây</h4>
<div style="background-image: radial-gradient(circle closest-side at center, red, blue, green);"></div><hr>
<h4>background-image: radial-gradient(circle at left, red, blue, green); Hình tròn, vị trí tâm nằm bên trái, chuyển từ màu đỏ sang màu xanh dương sau đó đến màu xanh lá cây</h4>
<div style="background-image: radial-gradient(circle at left, red, blue, green);"></div><hr>
<h4>background-image: radial-gradient(circle at center, red 10%, blue, green Hình tròn, vị trí tâm nằm ở giữa, chuyển từ màu đỏ (10%) sang màu xanh dương sau đó đến màu xanh lá cây</h4>
<div style="background-image: radial-gradient(circle at center, red 10%, blue, green"></div><hr>
<h4>mask: radial-gradient(circle at center, black 50%, rgba(0, 0, 0, 0.5) 50%); Hình tròn, vị trí ở giữa, chuyển từ vùng mờ sang trong suốt</h4>
<div style="mask: radial-gradient(circle at center, black 50%, rgba(0, 0, 0, 0.5) 50%);height:auto">
<img src="https://webmoi.vn/thumuc/thien-nhien.jpg" style="width:100%;height:auto">
</div>
<hr>
<p>Hình gốc</p>
<img src="https://webmoi.vn/thumuc/thien-nhien.jpg" style="width:100%;height:auto">
</body>
</html>
Hàm radial-gradient() ellipse (hình elip) trong CSS
background-image: radial-gradient(ellipse at center, red, blue);
Hình elip, vị trí tâm ở giữa, chuyển từ màu đỏ sang màu xanh dương
background-image: radial-gradient(ellipse closest-side at center, red, blue, green);
Hình elip, loại kích thước closest-side, vị trí tâm ở giữa, chuyển từ màu đỏ sang màu xanh dương sau đó đến màu xanh lá cây
background-image: radial-gradient(ellipse at left, red, blue, green);
Hình elip, vị trí tâm nằm bên trái, chuyển từ màu đỏ sang màu xanh dương sau đó đến màu xanh lá cây
background-image: radial-gradient(ellipse at center, red 10%, blue, green);
Hình elip, vị trí tâm nằm ở giữa, chuyển từ màu đỏ (10%) sang màu xanh dương sau đó đến màu xanh lá cây
mask: radial-gradient(ellipse at center, black 50%, rgba(0, 0, 0, 0.5) 50%);
Hình elip, vị trí ở giữa, chuyển từ vùng mờ sang trong suốt
<!DOCTYPE html>
<html>
<head>
<title>Hàm radial-gradient() ellipse (hình elip) trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
div {width:200px; float: left; height:150px; margin-bottom:10px; margin-right:10px}
h4{margin:0px;padding:0px}
hr {width:100%}
</style>
</head>
<body>
<h1>Hàm radial-gradient() ellipse (hình elip) trong CSS</h1>
<h4>background-image: radial-gradient(ellipse at center, red, blue); Hình elip, vị trí tâm ở giữa, chuyển từ màu đỏ sang màu xanh dương</h4>
<div style="background-image: radial-gradient(ellipse at center, red, blue);"></div><hr>
<h4>background-image: radial-gradient(ellipse closest-side at center, red, blue, green); Hình elip, loại kích thước closest-side, vị trí tâm ở giữa, chuyển từ màu đỏ sang màu xanh dương sau đó đến màu xanh lá cây</h4>
<div style="background-image: radial-gradient(ellipse closest-side at center, red, blue, green);"></div><hr>
<h4>background-image: radial-gradient(ellipse at left, red, blue, green); Hình elip, vị trí tâm nằm bên trái, chuyển từ màu đỏ sang màu xanh dương sau đó đến màu xanh lá cây</h4>
<div style="background-image: radial-gradient(ellipse at left, red, blue, green);"></div><hr>
<h4>background-image: radial-gradient(ellipse at center, red 10%, blue, green Hình elip, vị trí tâm nằm ở giữa, chuyển từ màu đỏ (10%) sang màu xanh dương sau đó đến màu xanh lá cây</h4>
<div style="background-image: radial-gradient(ellipse at center, red 10%, blue, green"></div><hr>
<h4>mask: radial-gradient(ellipse at center, black 50%, rgba(0, 0, 0, 0.5) 50%); Hình elip, vị trí ở giữa, chuyển từ vùng mờ sang trong suốt</h4>
<div style="mask: radial-gradient(ellipse at center, black 50%, rgba(0, 0, 0, 0.5) 50%);height:auto">
<img src="https://webmoi.vn/thumuc/thien-nhien.jpg" style="width:100%;height:auto">
</div>
<hr>
<p>Hình gốc</p>
<img src="https://webmoi.vn/thumuc/thien-nhien.jpg" style="width:100%;height:auto">
</body>
</html>
Các cách sử dụng hàm radial-gradient() trong CSS
Hàm radial-gradient() không chỉ dùng để tạo một vùng màu loang đơn giản. Khi kết hợp với kích thước, vị trí và nhiều điểm màu, bạn có thể tạo hiệu ứng ánh sáng, vùng nổi bật hoặc nền chuyển màu mềm mại mà không cần thêm hình ảnh.
Sử dụng radial-gradient() với background
Thuộc tính background cho phép đặt gradient trực tiếp làm nền cho phần tử. Đây là cách phù hợp khi cần tạo nền chuyển màu nhanh và không muốn khai báo quá nhiều thuộc tính riêng biệt.
.box {
background: radial-gradient(circle, #ffffff, #dfe8f2);
}
Trong ví dụ trên, màu sáng nằm ở vùng trung tâm rồi chuyển dần sang màu tối hơn về phía ngoài. Bạn có thể thay đổi màu sắc để tạo nền phù hợp với từng khu vực của giao diện.
Sử dụng radial-gradient() với background-image
Khi sử dụng background-image, gradient được xem như một lớp hình nền. Cách này hữu ích khi muốn kết hợp radial-gradient() với các hình nền khác hoặc kiểm soát riêng phần hình ảnh của phần tử.
.box {
background-image: radial-gradient(circle, #ffffff 0%, #e8eef5 70%);
}
Điểm mạnh của cách này là có thể xếp nhiều lớp nền cùng lúc. Chẳng hạn, một radial-gradient() có thể tạo vùng sáng phía sau nội dung, trong khi một lớp nền khác đảm nhiệm màu hoặc họa tiết chính.
Sử dụng radial-gradient() với mask
radial-gradient() còn có thể làm mặt nạ thông qua thuộc tính mask. Thay vì chỉ tạo màu nền, gradient lúc này quyết định khu vực nào của phần tử được hiển thị hoặc che khuất.
.box {
mask: radial-gradient(circle, #000 60%, transparent 100%);
}
Cách này thích hợp để tạo hiệu ứng phần tử mờ dần ở mép, hình tròn mềm hoặc vùng hiển thị có chuyển tiếp tự nhiên mà không cần tạo thêm một ảnh PNG trong suốt.
Kết hợp radial-gradient() với nhiều màu sắc
Một radial-gradient() có thể chứa nhiều điểm màu thay vì chỉ có màu bắt đầu và màu kết thúc. Mỗi điểm màu giúp kiểm soát rõ hơn quá trình chuyển tiếp từ tâm ra ngoài.
.box {
background: radial-gradient(
circle,
#ffffff 0%,
#d9f3ff 35%,
#74c7e8 65%,
#176b87 100%
);
}
Việc chia nhiều điểm màu giúp tạo chiều sâu rõ hơn. Bạn nên chọn các màu có quan hệ về sắc độ hoặc độ sáng để vùng chuyển tiếp không bị gắt và giữ được cảm giác tự nhiên.
Kết hợp radial-gradient() với vị trí và kích thước
Ngoài hình dạng, radial-gradient() còn cho phép thay đổi vị trí và kích thước của vùng chuyển màu. Nhờ đó, tâm gradient không nhất thiết phải nằm giữa phần tử mà có thể đặt ở bất kỳ vị trí nào phù hợp với bố cục.
.box {
background: radial-gradient(
circle at 20% 30%,
#ffffff 0%,
#dcefff 45%,
#6aa9d1 100%
);
}
Trong ví dụ này, tâm chuyển màu được đưa về gần góc trên bên trái thay vì nằm chính giữa. Đây là kỹ thuật hữu ích khi muốn tạo một vùng sáng phía sau tiêu đề, hình ảnh hoặc một thành phần nổi bật trên giao diện.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Hàm radial-gradient() trong CSS.
- 0 Bình luận
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 *
