Tìm hiểu cách thêm màu linear gradient cho text element với CSS, và cách tránh lỗi gradient phổ biến.
Để thêm màu gradient cho text HTML, bạn cần các thuộc tính CSS sau:
background-webkit-background-clip-webkit-text-fill-color
Tại sao dùng thuộc tính background để màu text? Cách tiếp cận có vẻ hơi "hack", nhưng tôi đảm bảo nó hoạt động!
Hãy tạo ví dụ nhanh áp dụng linear gradient từ trái sang phải trên text element, dùng hai màu: cam và đỏ:
HTML
Element <h2> heading với class attribute tên text-gradient:
<h2 class="text-gradient">Gradient text color!</h2>CSS
Thêm style gradient color cho class .text-gradient:
.text-gradient { /* Set background color */ background: linear-gradient(to right, #ff8a00 0%, #dd4c4f 100%); /* Mask color to text, remove the rest */ -webkit-background-clip: text; /* Make text fill color transparent so masked background shows through */ -webkit-text-fill-color: transparent; }Kết quả:
Gradient text color!
Tuyệt!
Nhưng đợt đã!
Bạn nhận ra vấn đề với cách hai màu áp dụng lên text element chưa? Các màu được áp dụng không đều.
Hàm CSS linear-gradient nhận hai giá trị màu:
#ff8a00(màu cam)#DD4C4F(màu đỏ)
Và nó phải spread từ 0 đến 100% đều đặn, như chỉ định trong CSS:
(to right, #ff8a00 0%, #DD4C4F 100%)Vì vậy chúng ta muốn cái này trên text element:
Nhưng ví dụ text gần như toàn màu cam:
Gradient text color!
Mẹo: nếu bạn bật dark mode (click icon Mặt trăng) dễ thấy hơn.
Nó xảy ra vì element <h2> heading là element block-level mặc định. Nghĩa là background của nó trải toàn bộ chiều rộng của parent container.
Điều này làm màu từ gradient class (.text-gradient) thêm vào <h2> element kéo dài vượt quá chiều rộng text vì nó target thuộc tính background.
Tôi thêm border cho ví dụ text để làm rõ ý:
Gradient text color!
Bạn thấy đó không?
Text gradient nên set chỉ trên text, không phải background (nhưng ta cần dùng background property để làm việc này work).
Để fix, bạn cần override setting mặc định display:block của <h2> bằng inline-block:
.text-gradient { background: linear-gradient(to right, #ff8a00 0%, #dd4c4f 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; }Kết quả:
Gradient text color!
Tuyệt! Bạn thấy khác biệt không? Bây giờ phần đỏ của gradient hai màu nổi bật ngang nhau với cam vì chúng áp dụng 50-50.
Tương thích trình duyệt
Mẹo gradient color chỉ hỗ trợ trên trình duyệt WebKit. Với trình duyệt khác, dùng CSS property color thông thường làm fallback và dùng màu tương tự gradient.