Gradient Background CSS Template để trang điểm webisite
Đâ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 ạ !
1090 lượt xem