Hướng dẫn background gradient css - độ dốc nền css

• Trang chủ
• Hướng dẫn học
• Hướng dẫn học CSS3
• Background gradient

Background gradient là gì?

Background gradient là dạng

Background gradient

7 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 (

Background gradient

8).

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:

Background gradient

BACGROUND GRADIENT: LINEAR-GRADIENT 2 GIÁ TRỊ

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

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

BACGROUND GRADIENT: LINEAR-GRADIENT 3 GIÁ TRỊ

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

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

BACGROUND GRADIENT: LINEAR-GRADIENT 3 GIÁ TRỊ

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

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

BACGROUND GRADIENT: LINEAR-GRADIENT 3 GIÁ TRỊ

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

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

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

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

BACGROUND GRADIENT: LINEAR-GRADIENT 3 GIÁ TRỊ

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

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

Cấu trúc tuyến tính (linear) - phần trăm	CSS viết	Cấu trúc tuyến tính (linear) theo hướng
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

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

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

BACGROUND GRADIENT: LINEAR-GRADIENT 3 GIÁ TRỊ

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

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

BACGROUND GRADIENT: LINEAR-GRADIENT 3 GIÁ TRỊ

Background gradient

0

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

BACGROUND GRADIENT: LINEAR-GRADIENT 3 GIÁ TRỊ

Background gradient

1

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

BACGROUND GRADIENT: LINEAR-GRADIENT 3 GIÁ TRỊ

Background gradient

2

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

BACGROUND GRADIENT: LINEAR-GRADIENT 3 GIÁ TRỊ

Background gradient

3

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

BACGROUND GRADIENT: LINEAR-GRADIENT 3 GIÁ TRỊ

Background gradient

4

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

BACGROUND GRADIENT: LINEAR-GRADIENT 3 GIÁ TRỊ

Background gradient

5

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

BACGROUND GRADIENT: LINEAR-GRADIENT 3 GIÁ TRỊ

Background gradient

6

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