20/07/2019, 10:00

Background gradient là gì?

Background gradient là gì? Background gradient là dạng background-color 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. Background gradient thường được dùng để thiết kế các nút nhấn (<button>). Cách thể hiện màu sắc của background gradient rất đa dạng, ...

Background gradient là gì?

Background gradient là dạng background-color 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.

Background gradient thường được dùng để thiết kế các nút nhấn (<button>).

Cách thể hiện màu sắc của background 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 background 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 background gradient.

Cấu trúc tuyến tính (linear) cơ bản

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

HTML viết:

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

BACGROUND GRADIENT: LINEAR-GRADIENT 2 GIÁ TRỊ

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

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

Background gradient

BACGROUND GRADIENT: LINEAR-GRADIENT 3 GIÁ TRỊ

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

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

Background gradient

BACGROUND GRADIENT: LINEAR-GRADIENT NHIỀU GIÁ TRỊ

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

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

Background gradient

Cấu trúc tuyến tính (linear) - phần trăm

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

CSS viết

div {
    background-image: linear-gradient(#476CFF 10%, #FFEF5C 50%);
    height: 200px;
    awidth: 400px;
}

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

Background gradient

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

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

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

Giá trị Mô tả Ví dụ
to top Shadow sẽ từ dưới lên trên (bắt đầu từ color1)
to bottom Shadow sẽ từ trên xuống dưới (bắt đầu từ color1)
to right Shadow sẽ từ trái sang phải (bắt đầu từ color1)
to left Shadow sẽ từ phải sang trái (bắt đầu từ color1)
to right top Shadow sẽ từ bên trái dưới tới bên phải trên (bắt đầu từ color1)
to right bottom Shadow sẽ từ bên trái trên xuống bên phải dưới (bắt đầu từ color1)
to left top Shadow sẽ từ bên phải dưới lên bên trái trên (bắt đầu từ color1)
to left bottom Shadow sẽ từ bên phải trên xuống bên trái dưới (bắt đầu từ color1)
Góc (tính bằng độ) Shadow sẽ từ góc bao nhiêu độ xuống hướng còn lại (bắt đầu từ color1)

BACGROUND GRADIENT: LINEAR-GRADIENT TO TOP

div {
    background-image: linear-gradient(to top, #476CFF, #FFEF5C);
    height: 200px;
    awidth: 400px;
}

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

Background gradient

BACGROUND GRADIENT: LINEAR-GRADIENT TO BOTTOM

div {
    background-image: linear-gradient(to bottom, #476CFF, #FFEF5C);
    height: 200px;
    awidth: 400px;
}

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

Background gradient

BACGROUND GRADIENT: LINEAR-GRADIENT TO RIGHT

div {
    background-image: linear-gradient(to right, #476CFF, #FFEF5C);
    height: 200px;
    awidth: 400px;
}

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

Background gradient

BACGROUND GRADIENT: LINEAR-GRADIENT TO LEFT

div {
    background-image: linear-gradient(to left, #476CFF, #FFEF5C);
    height: 200px;
    awidth: 400px;
}

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

Background gradient

BACGROUND GRADIENT: LINEAR-GRADIENT TO RIGHT TOP

div {
    background-image: linear-gradient(to right top, #476CFF, #FFEF5C);
    height: 200px;
    awidth: 400px;
}

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

Background gradient

BACGROUND GRADIENT: LINEAR-GRADIENT TO RIGHT BOTTOM

div {
    background-image: linear-gradient(to right bottom, #476CFF, #FFEF5C);
    height: 200px;
    awidth: 400px;
}

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

Background gradient

BACGROUND GRADIENT: LINEAR-GRADIENT TO LEFT TOP

div {
    background-image: linear-gradient(to left top, #476CFF, #FFEF5C);
    height: 200px;
    awidth: 400px;
}

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

Background gradient

BACGROUND GRADIENT: LINEAR-GRADIENT TO LEFT BOTTOM

div {
    background-image: linear-gradient(to left bottom, #476CFF, #FFEF5C);
    height: 200px;
    awidth: 400px;
}

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

Background gradient

BACGROUND GRADIENT: LINEAR-GRADIENT - GÓC

div {
    background-image: linear-gradient(-130deg, #476CFF, #FFEF5C);
    height: 200px;
    awidth: 400px;
}

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

Background gradient
0