Share Tạo hiệu ứng linear gradient đẹp mắt với thư viện WebGradients

[filiallion]

Language

Tiếng Việt

Nếu các bạn muốn tạo hiệu ứng màu nền chuyển sắc kiểu linear gradient bằng CSS3 thì các bạn có thể tham khảo thư viện CSS3 WebGradients tại địa chỉ https://webgradients.com. Hiện tại WebGradients cung cấp rất nhiều mẫu CSS thiết kế linear gradient rất đẹp, các bạn có thể xem qua các demo rồi sao chép mã CSS để sử dụng cho dự án của mình. Ngoài ra, WebGradients còn hỗ trợ các bạn xuất ra tập tin hình ảnh PNG, rất thuận tiện trong trường hợp các bạn muốn sử dụng nhanh bằng cách chèn hình ảnh.

Các bạn có thể tham khảo ví dụ sau:

.linear-gradient {
    width: 100px;
    height: 100px;
    background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
}

Hoặc một ví dụ khác:

.linear-gradient {
    width: 100px;
    height: 100px;
    background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
}