Gradient Text CSS để dành trang điểm website

Đây là bài viết nhằm lưu lại một số mẫu Gradient Text CSS để dành trang điểm website thôi chứ không có gì đặc biệt hết các bác ạ :v

#Style 1 Cssgradient.io example

.gradient-1 {
font-weight: 800;
background: -webkit-linear-gradient(45deg, #09009f, #00ff95 80%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

#Style 2 art font 

.gradient-2 {
font-family: 'Lobster', cursive;
background-image: linear-gradient(to right, #6ED5D8, #71A3DD);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}

#Style 3 monospace

.gradient-3 {
background-image: linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BFF88 90%);
-webkit-background-clip: text;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-family: monospace;
}

#Style 4 more color

.gradient-4 {
display: inline;
background-image: linear-gradient(to right, #673AB7, #009688, #E91E63, #009688, #642D91);
background-clip: text;
-webkit-background-clip: text;
text-fill-color: transparent;
-webkit-text-fill-color: transparent;
}

#Mẫu 5,..tiếp tục sưu tầm

Bài viết bạn đang xem được viết bởi Tịnh Nguyễn, là người thường đăng bài và comment dạo trên Hocban.vn

Không biết bạn đã từng đọc qua các nội dung dưới đây chưa nhỉ ?

avatar