Đâ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ó.
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:
#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:
#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:
#04 Gradient background hướng tâm
Demo:
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 ạ !