Radial gradient

radial-gradient là gì?

Bài học này học để biết thêm, chứ thực tế rất ít khi sử dụng.

radial-gradient là dạng background-color dạng hình tròn hoặc cong (radial) có biên độ màu sắc giảm dần, hoặc thay đổi từ màu này sang màu khác.

Cách thể hiện màu sắc của radial gradient rất đa dạng, nên người viết code sẽ sử dụng tool để điều chỉnh theo đúng ý đồ mình, các bạn có thể tham khảo tool tạo radial-gradient.

Dưới đây, ta sẽ lần lượt viết một vài cấu trúc đơn giản, thường dùng của radial-gradient.

Cấu trúc cơ bản

tag {
    background-image: radial-gradient(color1, color2);
}

HTML viết:

<!DOCTYPE HTML>
<html>
<head></head>
<body>
<div>radial gradient</div>
</body>
</html>

RADIAL-GRADIENT 2 GIÁ TRỊ

div {
    background-image: radial-gradient(#476CFF, #FFEF5C);
    height: 200px;
    width: 400px;
}

Hiển thị trình duyệt:

radial gradient

RADIAL-GRADIENT 3 GIÁ TRỊ

div {
    background-image: radial-gradient(#476CFF, #FFEF5C, #666666);
    height: 200px;
    width: 400px;
}

Hiển thị trình duyệt:

radial gradient

RADIAL-GRADIENT NHIỀU GIÁ TRỊ

div {
    background-image: radial-gradient(#FF0000, #FF913D, #FFFF00, #06CF1A, #66FAFF, #7A7AFF, #CC40FF);
    height: 200px;
    width: 400px;
}

Hiển thị trình duyệt:

radial gradient

Cấu trúc radial - phần trăm

tag {
    background-image: radial-gradient(color1 percent1, color2 percent2);
}

CSS viết

div {
    background-image: radial-gradient(#476CFF 20%, #FFEF5C 50%, #666 80%);
    height: 200px;
    width: 400px;
}

Hiển thị trình duyệt:

radial gradient

Cấu trúc tuyến tính (radial) theo hướng

tag {
     background-image: radial-gradient(hướng, color1, color2);
}

Các giá trị hướng có thể có:

Giá trị	Mô tả	Ví dụ
at left top	Trung tâm shadow sẽ bắt đầu từ bên trái ở trên (bắt đầu từ color1)
at center top	Trung tâm shadow sẽ bắt đầu từ trung tâm ở trên (bắt đầu từ color1)
at right top	Trung tâm shadow sẽ bắt đầu từ bên phải ở trên (bắt đầu từ color1)
at left center	Trung tâm shadow sẽ bắt đầu từ bên trái ở giữa (bắt đầu từ color1)
at center center	Trung tâm shadow sẽ bắt đầu từ ngay trung tâm (bắt đầu từ color1)
at right center	Trung tâm shadow sẽ bắt đầu từ bên phải ở giữa (bắt đầu từ color1)
at left bottom	Trung tâm shadow sẽ bắt đầu từ bên trái ở dưới (bắt đầu từ color1)
at center bottom	Trung tâm shadow sẽ bắt đầu từ trung tâm ở dưới (bắt đầu từ color1)
at right bottom	Trung tâm shadow sẽ bắt đầu từ bên phải ở dưới (bắt đầu từ color1)
Reapeating	Background radial sẽ được lặp lại

RADIAL-GRADIENT AT LEFT TOP

div {
    background-image: radial-gradient(at left top, #476CFF, #FFEF5C);
    height: 200px;
    width: 400px;
}

Hiển thị trình duyệt:

radial gradient

RADIAL-GRADIENT AT CENTER TOP

div {
    background-image: radial-gradient(at center top, #476CFF, #FFEF5C);
    height: 200px;
    width: 400px;
}

Hiển thị trình duyệt:

radial gradient

RADIAL-GRADIENT AT RIGHT TOP

div {
    background-image: radial-gradient(at right top, #476CFF, #FFEF5C);
    height: 200px;
    width: 400px;
}

Hiển thị trình duyệt:

radial gradient

RADIAL-GRADIENT AT LEFT CENTER

div {
    background-image: radial-gradient(at left center, #476CFF, #FFEF5C);
    height: 200px;
    width: 400px;
}

Hiển thị trình duyệt:

radial gradient

RADIAL-GRADIENT AT CENTER CENTER

div {
    background-image: radial-gradient(at center center, #476CFF, #FFEF5C);
    height: 200px;
    width: 400px;
}

Hiển thị trình duyệt:

radial gradient

RADIAL-GRADIENT AT RIGHT CENTER

div {
    background-image: radial-gradient(at right center, #476CFF, #FFEF5C);
    height: 200px;
    width: 400px;
}

Hiển thị trình duyệt:

radial gradient

RADIAL-GRADIENT AT LEFT BOTTOM

div {
    background-image: radial-gradient(at left bottom, #476CFF, #FFEF5C);
    height: 200px;
    width: 400px;
}

Hiển thị trình duyệt:

radial gradient

RADIAL-GRADIENT AT CENTER BOTTOM

div {
    background-image: radial-gradient(at center bottom, #476CFF, #FFEF5C);
    height: 200px;
    width: 400px;
}

Hiển thị trình duyệt:

radial gradient

RADIAL-GRADIENT AT RIGHT BOTTOM

div {
    background-image: radial-gradient(at right bottom, #476CFF, #FFEF5C);
    height: 200px;
    width: 400px;
}

Hiển thị trình duyệt:

radial gradient

REPEATING-RADIAL-GRADIENT

div {
    background-image: repeating-radial-gradient(#476CFF 40%, #FFEF5C 60%);
    height: 200px;
    width: 400px;
}

Hiển thị trình duyệt:

radial gradient

Background gradient

transition