Trình Tạo Gradient Văn Bản CSS

Cách sử dụng

1. Chọn màu của bạn: chọn hai màu trở lên cho gradient bằng các bộ chọn.
2. Điều chỉnh góc và kiểu: chọn gradient tuyến tính hoặc xuyên tâm, điều chỉnh góc và tùy chọn thêm vị trí điểm dừng màu.
3. Sao chép CSS: mã CSS được tạo sử dụng background-clip: text và -webkit-background-clip: text cho hiệu ứng văn bản gradient, sao chép trực tiếp vào tệp kiểu của bạn.

Tại sao sử dụng trình tạo văn bản gradient?

Văn bản gradient là một trong những hiệu ứng CSS hiện đại phổ biến nhất cho tiêu đề, logo và văn bản kêu gọi hành động. Để có được nó cần một sự kết hợp cụ thể của các thuộc tính CSS (background, background-clip, -webkit-text-fill-color) dễ bị bỏ sót. Trình tạo này xử lý cú pháp đa trình duyệt tự động và cung cấp xem trước trực tiếp để hoàn thiện gradient của bạn trước khi viết bất kỳ dòng mã nào.

Tính năng

• Nhiều điểm dừng màu: thêm bao nhiêu điểm dừng màu cần thiết cho các hiệu ứng gradient phức tạp.
• Tuyến tính và xuyên tâm: chọn giữa gradient tuyến tính có hướng và gradient xuyên tâm tập trung.
• Kiểm soát góc: điều chỉnh góc gradient từ 0° đến 360° với một mặt số trực quan.
• Xem trước trực tiếp: xem văn bản gradient của bạn cập nhật theo thời gian thực với mẫu của bạn.
• CSS đa trình duyệt: đầu ra bao gồm các tiền tố -webkit và các giải pháp dự phòng để tương thích tối đa.

Câu hỏi thường gặp

Văn bản gradient CSS hoạt động như thế nào?

Văn bản gradient CSS hoạt động bằng cách áp dụng một gradient làm nền của phần tử, sau đó cắt nền đó theo hình dạng văn bản với background-clip: text và làm cho màu văn bản trong suốt với -webkit-text-fill-color: transparent (hoặc color: transparent). Chỉ phần cắt theo hình dạng văn bản của gradient là hiển thị.

Văn bản gradient có hoạt động trong tất cả các trình duyệt không?

Văn bản gradient CSS hoạt động trong tất cả các trình duyệt hiện đại, Chrome, Firefox, Safari và Edge. Thuộc tính -webkit-background-clip: text được hỗ trợ tốt. Luôn cung cấp một dự phòng màu đặc cho các trình duyệt rất cũ qua thuộc tính color.

Tôi có thể sử dụng cái này ở bất kỳ cỡ chữ nào không?

Có. Văn bản gradient thích ứng hoàn hảo với cỡ chữ, đó là CSS thuần, không phải hình ảnh, vì vậy nó vẫn sắc nét ở mọi độ phân giải, bao gồm trên các màn hình mật độ cao.

Lịch sử ngắn của văn bản gradient trên web

Văn bản gradient trở nên có thể hiển thị trên web với thuộc tính -webkit-background-clip: text của WebKit, một phần mở rộng Safari/Chromium thử nghiệm được đề xuất bởi nhóm WebKit năm 2008 như một cách để lấp đầy các hình dạng glyph của văn bản với một nền tùy ý (gradient, hình ảnh, bất kỳ thứ gì). Kỹ thuật này vẫn không chính thức trong nhiều năm: Firefox chỉ phát hành background-clip: text không có tiền tố trong phiên bản 49 (tháng 9 năm 2016), và CSS Backgrounds Module Level 4 chính thức hóa nó như một bản nháp công việc W3C bắt đầu khoảng 2018. Cú pháp gradient cơ bản trưởng thành riêng biệt. CSS Images Module Level 3 (Khuyến nghị W3C 2017) đã chuẩn hóa linear-gradient() và radial-gradient() như các giá trị hình ảnh hạng nhất; conic-gradient() theo sau trong Module Level 4 (Chrome 69 tháng 9 năm 2018, Safari 12.1 tháng 3 năm 2019, Firefox 83 tháng 11 năm 2020). Sự kết hợp của hai thông số kỹ thuật này là điều làm cho một tiêu đề gradient một dòng có thể thực hiện được ngày nay. Việc áp dụng bùng nổ trong cộng đồng nhà phát triển khi Tailwind CSS phát hành các lớp tiện ích bg-clip-text trong v1.4 (2020), làm cho tiêu đề gradient trở thành một nguyên thủy có thể cắm vào. Nhận dạng thương hiệu hiện đại bây giờ dựa vào văn bản gradient như một chữ ký trực quan: chuỗi «Bridges» của Stripe, logo gradient của Linear, trang đích của Vercel, tiếp thị WWDC của Apple, và cửa hàng mẫu của Notion đều sử dụng kỹ thuật này. Mẫu kết hợp background-clip: text + gradient đã thay thế hiệu quả «PNG của tiêu đề được tạo kiểu» đã thống trị thiết kế web 2005-2015, loại bỏ một loại vấn đề về khả năng tiếp cận và hiệu suất trong một lần.

Giải phẫu của văn bản gradient CSS

• Bản thân gradient. background-image: linear-gradient(90deg, #f00, #00f) đặt nền của phần tử thành một gradient 90 độ chạy từ đỏ sang xanh dương. Gradient có thể là tuyến tính (định hướng), xuyên tâm (trung tâm), hình nón (quét xoay), hoặc bất kỳ biến thể lặp lại nào. Gradient CSS là các giá trị hình ảnh, không phải giá trị màu, đó là điều làm cho chúng có thể được cắt thành hình dạng văn bản.
• background-clip: text. Yêu cầu trình duyệt chỉ hiển thị nền bên trong hình học của các glyph được hiển thị. Nếu không có thuộc tính duy nhất này, gradient sẽ lấp đầy toàn bộ khung phần tử; với nó, gradient bị giới hạn vào đường viền văn bản. Ban đầu là một phần mở rộng WebKit có tiền tố là -webkit-background-clip: text, hiện nay cũng không có tiền tố trong Firefox 49+ (2016) và các trình duyệt dựa trên Chromium.
• color: transparent hoặc -webkit-text-fill-color: transparent. Khi nền đã được cắt vào văn bản, kết quả hiển thị vẫn phụ thuộc vào màu mà chính văn bản vẽ lên trên nền. Đặt color: transparent (hoặc -webkit-text-fill-color: transparent có tiền tố) cho phép gradient hiển thị xuyên qua. Nếu không có điều này, màu văn bản đặc sẽ chỉ đơn giản vẽ lên trên gradient đã cắt.
• Chuỗi tiền tố -webkit-. Safari, nền tảng có lịch sử tiền tố tích lũy nhiều nhất, vẫn phân tích các thuộc tính không có tiền tố nhưng các phiên bản có tiền tố vẫn còn trong mã sản xuất vì lý do kế thừa. Đầu ra của trình tạo này bao gồm cả background-clip: text và -webkit-background-clip: text để kỹ thuật hoạt động trở lại với Safari 14 và bất kỳ trình duyệt dựa trên WebKit kế thừa nào.
• Các loại gradient và điểm dừng. linear-gradient(angle, color1, color2, ...) đi theo một hướng; radial-gradient(shape at position, ...) phát ra từ một điểm; conic-gradient(from angle at position, ...) quét xung quanh như kim đồng hồ. Mỗi cái chấp nhận bất kỳ số lượng điểm dừng màu nào, với các vị trí rõ ràng (red 0%, blue 50%, green 100%) để kiểm soát chi tiết về nơi mỗi màu bắt đầu và kết thúc.

Các mẫu sử dụng văn bản gradient trong thực tế

• Tiêu đề nhận dạng thương hiệu. Chuỗi «Bridges» của Stripe, hero sản phẩm của Linear, biểu ngữ «Develop. Preview. Ship.» của Vercel đều sử dụng văn bản gradient như một chữ ký thương hiệu. Wordmark một màu cảm thấy lỗi thời đối với SaaS giai đoạn đầu, trong khi các tiêu đề gradient mang theo dấu hiệu trực quan «được xây dựng vào năm 2024».
• Tiêu đề phần hero. H1 trên trang đích thường là phần tử văn bản duy nhất có ngân sách thiết kế cao nhất. Văn bản gradient mang lại trọng lượng trực quan mà không cần dùng đến tệp phông tùy chỉnh, SVG, hoặc hình ảnh hero, tất cả đều thêm trọng lượng trang và mối quan tâm về khả năng tiếp cận.
• Trang số liệu có số lớn. Các trang định giá («$0 để bắt đầu»), gọi ra thống kê («nhanh hơn 10×») và tóm tắt bảng điều khiển sử dụng văn bản gradient để thu hút mắt đến chính con số đó. Gradient thay thế hiệu quả mẫu «vòng tròn màu phía sau số» của các thiết kế cũ hơn.
• Nút kêu gọi hành động. Một gradient tinh tế trên văn bản CTA (thay vì nền nút) cảm thấy tinh tế hơn một màu đặc và kết hợp tốt với bề mặt nút glassmorphism hoặc neumorphic. Kỹ thuật này phổ biến trong các thương hiệu fintech và công cụ thiết kế.
• Điểm nhấn điều hướng. Trạng thái hoạt động hoặc di chuột trên liên kết điều hướng có thể sử dụng văn bản gradient để cung cấp phản hồi trực quan mà không cần thêm gạch chân hoặc thay đổi màu nền. Mẫu này được sử dụng nhiều trong các trang web tài liệu (Stripe Docs, Tailwind Docs).
• Chế độ tối và thiết kế brand-bridge. Văn bản gradient hoạt động đặc biệt tốt trên nền tối vì các màu bão hòa nổi bật mà không cạnh tranh với bề mặt sáng bận rộn. Nhiều sản phẩm giữ tiêu đề màu đặc ở chế độ sáng và chuyển sang gradient ở chế độ tối (sử dụng hoán đổi biến CSS).
• Gọi ra sản phẩm thương mại điện tử. Các huy hiệu «Khuyến mãi», «Mới», «Phiên bản giới hạn» và phụ đề sản phẩm sử dụng văn bản gradient để phân biệt mình với phần thân văn bản mà không cần tài sản biểu tượng. Trình chỉnh sửa cửa hàng của Shopify hiển thị văn bản gradient như một tùy chọn tích hợp vào năm 2024.

Cân nhắc về khả năng tiếp cận

• WCAG 2.1 SC 1.4.3 Độ tương phản (Tối thiểu). Tiêu chí thành công yêu cầu ít nhất 4,5:1 độ tương phản giữa văn bản và nền cho văn bản bình thường (3:1 cho văn bản lớn, được định nghĩa là 18pt+ hoặc 14pt đậm). Văn bản gradient khó đánh giá hơn vì tỷ lệ tương phản thay đổi qua gradient. Cách tiếp cận an toàn: đảm bảo rằng màu sáng nhất trong gradient của bạn vẫn đáp ứng tỷ lệ so với nền. Các công cụ như WebAIM Contrast Checker và Stark trong Figma có thể giúp ích.
• Chọn màu gradient tối nhất trước. Khi ghép gradient với nền sáng, chọn màu sáng nhất của gradient để vượt qua tỷ lệ 4,5:1 đảm bảo rằng phần còn lại của gradient cũng có thể tiếp cận được. Điều tương tự áp dụng ngược lại trên nền tối. WCAG 2.2 (khuyến nghị tháng 10 năm 2023) đã thắt chặt hướng dẫn về trình bày trực quan, bao gồm trường hợp độ tương phản văn bản thay đổi trong quá trình chạy.
• Trình đọc màn hình thấy văn bản không thay đổi. Bởi vì gradient hoàn toàn là một kiểu trực quan (background-clip, color), công nghệ hỗ trợ đọc nội dung văn bản đã hiển thị bất kể nó được tô màu như thế nào. Không có mối quan tâm về «văn bản thay thế» với văn bản gradient, không giống như văn bản hình ảnh được rasterized hoặc SVG-văn bản-không có-phần tử-văn bản.
• prefers-reduced-motion. Gradient được hoạt hình (chuyển đổi background-position, hoạt ảnh chu kỳ màu) nên được bọc trong @media (prefers-reduced-motion: no-preference) để người dùng có rối loạn tiền đình hoặc nhạy cảm với chuyển động thấy một gradient tĩnh. CSS Working Group đã thêm truy vấn phương tiện vào 2017; hỗ trợ trình duyệt đã trở nên phổ biến từ 2020.
• Phóng to trình duyệt và thay đổi kích thước văn bản. WCAG 2.1 SC 1.4.4 yêu cầu văn bản có thể thay đổi kích thước lên đến 200% mà không mất nội dung. Văn bản gradient mở rộng hoàn hảo vì nó được hiển thị hoàn toàn bằng CSS (không rasterization). Người dùng có thị lực kém sử dụng phóng to Ctrl+/Cmd+ sẽ thấy gradient vẫn sắc nét ở bất kỳ mức phóng to nào.
• Bảng định kiểu in. Hầu hết các trình duyệt loại bỏ các màu được cắt nền khi in vì trang in mong đợi mực trên giấy, và các nền gradient biến mất. Luôn cung cấp một ghi đè @media print đặt một color đặc trên văn bản gradient để các bản sao in vẫn có thể đọc được. Nhiều nhà thiết kế quên điều này; in một tiêu đề gradient thường tạo ra văn bản vô hình.
• Chuỗi màu dự phòng. Luôn đặt thuộc tính color đặc trước, sau đó thêm color: transparent (hoặc -webkit-text-fill-color: transparent) để các trình duyệt không hỗ trợ background-clip: text (IE kế thừa, trình duyệt Android rất cũ) vẫn thấy văn bản màu đặc thay vì văn bản vô hình. Đầu ra của trình tạo bao gồm dự phòng này theo mặc định.

Thêm câu hỏi thường gặp

Tại sao văn bản gradient được coi là chữ ký thương hiệu hiện đại?

Hai lý do. Đầu tiên, lý do kỹ thuật: văn bản gradient chỉ trở nên hoàn toàn tương thích trên các trình duyệt khoảng 2017-2020, vì vậy các thiết kế sử dụng nó mang theo dấu hiệu trực quan «được xây dựng gần đây» một cách rõ ràng, cùng cách mà flat design đã nói «2013» hoặc skeuomorphism đã nói «2010». Thứ hai, lý do văn hóa: Stripe, Linear, Vercel và Apple WWDC đã phổ biến văn bản gradient như một yếu tố nhận dạng thương hiệu trong làn sóng tiếp thị fintech và công cụ dành cho nhà phát triển 2020-2024. Áp dụng cùng một ngôn ngữ trực quan báo hiệu thuộc về dòng dõi thiết kế đó.

Làm thế nào để tôi hoạt hình hóa hiệu ứng văn bản gradient?

Kỹ thuật phổ biến nhất hoạt hình hóa background-position trên một gradient quá cỡ. Đặt background-size: 200% 200% và hoạt hình hóa background-position từ 0% 0% đến 100% 100% trong vòng lặp 3-5 giây. Luôn bọc các keyframe trong @media (prefers-reduced-motion: no-preference) để người dùng nhạy cảm với chuyển động thấy phiên bản tĩnh. Tránh hoạt hình hóa các điểm dừng màu riêng lẻ trực tiếp: CSS hiện không nội suy giữa các giá trị gradient một cách trơn tru trên các trình duyệt, mặc dù CSS @property (Khuyến nghị ứng viên W3C 2022) đang bắt đầu kích hoạt điều này.

Các công cụ tìm kiếm và trình đọc màn hình có thể thấy văn bản gradient không?

Có. Văn bản gradient là văn bản HTML thuần được tạo kiểu bằng CSS; DOM vẫn chứa các ký tự thực tế. Google, Bing, trình đọc màn hình (NVDA, JAWS, VoiceOver), và bất kỳ công cụ trích xuất văn bản nào đều đọc nội dung chính xác như thể đó là văn bản màu đặc thông thường. Đây là một trong những lý do chính tại sao văn bản CSS gradient đã thay thế mẫu cũ «PNG của tiêu đề được tạo kiểu»: những hình ảnh đó vô hình đối với tìm kiếm và trình đọc màn hình mà không có văn bản thay thế thủ công.

Văn bản gradient có hoạt động trong email HTML không?

Hầu hết là không. Outlook desktop (engine kết xuất Word) loại bỏ background-clip; client web Gmail hỗ trợ nó không nhất quán; Apple Mail và các client Gmail di động hiện đại thường kết xuất nó chính xác. Đối với các chiến dịch email, cách tiếp cận an toàn hơn là gửi một tiêu đề màu đặc dự phòng và xem văn bản gradient như «cải tiến tiến bộ» cho các client hỗ trợ nó. Một số đội tổ hợp trước tiêu đề dưới dạng PNG/SVG với văn bản thay thế và chấp nhận sự đánh đổi về khả năng tiếp cận.

Màu nào hoạt động tốt nhất cùng nhau trong một gradient văn bản?

Ba mẫu chiếm ưu thế. Tương tự (các màu cạnh nhau trên bánh xe, ví dụ xanh dương → tím → hồng) cho kết quả mượt mà, thân thiện với thương hiệu, và là mặc định cho hầu hết các hệ thống thiết kế hiện đại. Bổ sung (đối diện trên bánh xe, ví dụ xanh dương → cam) tạo ra sự tương phản mạnh mẽ nhưng có thể trông sặc sỡ trong văn bản dài. Sắc thái thương hiệu (màu thương hiệu chính của bạn với biến thể độ sáng/độ bão hòa tinh tế) tạo ra hiệu ứng tinh vi mà cảm thấy tích hợp hơn là trang trí. Tránh trộn hơn ba màu trong một tiêu đề duy nhất; gradient phức tạp tốt hơn nên dành cho biểu tượng và yếu tố đồ họa.