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

Nếu bạn thấy bài viết này hữu ích thì có thể chia sẻ nó qua:

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

Bài viết có vẻ liên quan ^ ^
avatar