Gradient Background CSS Template để trang điểm webisite

Gradient background CSS demo

Đây là bài viết tổng hợp các mẫu Gradient background CSS template mình đã sưu tầm cũng như tự nghịch nên :v để dành cho trang điểm webisite. Anh em tham khảo và dùng thử xem sao nhé !

Bây giờ chúng ta có một mẫu mặc định như sau, và những mẫu sau sẽ sử dụng khung sườn của nó.

Gradient background CSS

Code để anh em tham khảo:

<div style="
background: #2196F3;
width: 100%; 
height: 100px;
color: white;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
">
NỘI DUNG VĂN BẢN
</div>

#01 Gradient background 2 màu đơn giản xanh chuối

Giá trị background của nó như bên dưới:

.ten-class {
background: linear-gradient(40deg,#009688,#4CAF50);
}

Demo:

NỘI DUNG VĂN BẢN

#02 Gradient background 2 màu đơn giản tía tía một chút

Giá trị background của nó như bên dưới:

.ten-class {
background: linear-gradient(40deg,#77008cb8,#041158d1);
}

Demo:

NỘI DUNG VĂN BẢN

#03 Gradient background 2 màu vàng chóe kiểu Google

Giá trị background của nó như bên dưới:

.ten-class {
background: linear-gradient(110deg, #fdcd3b 60%, #ffed4b 60%);
height: 100px;
}

Demo:

NỘI DUNG VĂN BẢN

#04 Gradient background hướng tâm

Demo:

NỘI DUNG VĂN BẢN

Giá trị background của nó như bên dưới:

.ten-class {

background: linear-gradient(164deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.08) 50%,rgba(222, 222, 222, 0.08) 50%, rgba(222, 222, 222, 0.08) 100%),linear-gradient(73deg, rgba(182, 182, 182, 0.02) 0%, rgba(182, 182, 182, 0.02) 50%,rgba(216, 216, 216, 0.02) 50%, rgba(216, 216, 216, 0.02) 100%),linear-gradient(215deg, rgba(27, 27, 27, 0.09) 0%, rgba(27, 27, 27, 0.09) 50%,rgba(243, 243, 243, 0.09) 50%, rgba(243, 243, 243, 0.09) 100%),linear-gradient(236deg, rgba(242, 242, 242, 0.05) 0%, rgba(242, 242, 242, 0.05) 50%,rgba(16, 16, 16, 0.05) 50%, rgba(16, 16, 16, 0.05) 100%),linear-gradient(256deg, rgba(170, 170, 170, 0.07) 0%, rgba(170, 170, 170, 0.07) 50%,rgba(209, 209, 209, 0.07) 50%, rgba(209, 209, 209, 0.07) 100%),linear-gradient(126deg, rgba(204, 204, 204, 0.1) 0%, rgba(204, 204, 204, 0.1) 50%,rgba(26, 26, 26, 0.1) 50%, rgba(26, 26, 26, 0.1) 100%),linear-gradient(61deg, rgba(250, 250, 250, 0.01) 0%, rgba(250, 250, 250, 0.01) 50%,rgba(13, 13, 13, 0.01) 50%, rgba(13, 13, 13, 0.01) 100%),linear-gradient(56deg, rgba(210, 210, 210, 0.05) 0%, rgba(210, 210, 210, 0.05) 50%,rgba(79, 79, 79, 0.05) 50%, rgba(79, 79, 79, 0.05) 100%),linear-gradient(226deg, rgba(62, 62, 62, 0.08) 0%, rgba(62, 62, 62, 0.08) 50%,rgba(73, 73, 73, 0.08) 50%, rgba(73, 73, 73, 0.08) 100%),linear-gradient(90deg, rgb(236, 2, 158),rgb(161, 2, 79));

 height: 100px; }

Hôm sau lại sưu tầm tiếp nhé, các bác có thể chia sẻ với Hocban.vn mẫu Gradient background nào hay hay, đẹp đẹp bên dưới comment với ạ !