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, chi tiết như nào hãy cùng chúng tôi phân tích:

Hàm radial-gradient() trong CSS

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>

Chạy Thử

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>

Chạy Thử

Lời kết

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

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

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

Chia sẻ nội dung đánh giá của bạn về Hàm radial-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

Đăng ký tư vấn miễn phí

Tìm hiểu 1 năm không bằng lắng nghe 1 câu tư vấn