Gradient Text Generator - Tạo Chữ Gradient

Tính năng nổi bật

• Nhập nội dung chữ và xem trước ngay trên khối lớn phía trên
• Chọn hai màu bằng bảng chọn màu hoặc gõ thẳng mã màu vào ô bên cạnh
• Thanh trượt góc chuyển sắc chạy đủ vòng từ 0 tới 360 độ, bước nhảy một độ
• Thanh trượt cỡ chữ từ 16 tới 120 pixel để thử hiệu ứng ở cả cỡ nhỏ lẫn cỡ tiêu đề
• Chọn độ đậm nét từ 400 tới 900 để thấy nét mảnh hay nét dày ảnh hưởng thế nào tới màu
• Tám bộ màu dựng sẵn với tên gợi nhớ, bấm một cái là thay cả hai màu
• Xuất đoạn CSS thuần đầy đủ cả dòng có tiền tố webkit lẫn dòng chuẩn
• Xuất kèm đoạn dùng lớp tiện ích Tailwind cho dự án đang theo hướng đó

Vì sao nên làm chữ chuyển sắc bằng CSS thay vì cắt ảnh

Cách nhanh nhất để có một tiêu đề chuyển sắc là xuất một tấm ảnh từ công cụ thiết kế, nhưng cái giá phải trả lộ ra ngay sau đó. Ảnh chữ không tìm kiếm được, không sao chép được, trình đọc màn hình bỏ qua nếu bạn quên đặt văn bản thay thế, và khi cần sửa một từ thì phải mở lại tệp thiết kế. Ảnh cũng phải xuất nhiều độ phân giải cho màn hình mật độ cao, và luôn có nguy cơ chữ bị vỡ khi phóng to. Làm bằng CSS thì chữ vẫn là chữ: máy tìm kiếm đọc được, người dùng bôi đen sao chép được, dịch tự động chạy được, và đổi nội dung chỉ là sửa một dòng trong mã nguồn. Hiệu ứng cũng tự co giãn theo cỡ chữ trên từng thiết bị mà không mất nét. Đổi lại, bạn cần hiểu vài điểm về cách trình duyệt cắt nền theo hình chữ, và cần biết trước hiệu ứng này ảnh hưởng tới độ tương phản như thế nào.

Lợi ích khi sử dụng

• •Chữ vẫn là văn bản thật nên máy tìm kiếm và trình đọc màn hình xử lý được bình thường
• •Đổi nội dung hay đổi màu chỉ mất vài giây, không phải quay về tệp thiết kế xuất ảnh lại
• •Hiệu ứng sắc nét ở mọi mật độ điểm ảnh vì trình duyệt vẽ chữ chứ không phóng to ảnh
• •Xem trước trực tiếp nên thấy ngay lúc nào dải màu quá tinh tế đến mức không nhận ra
• •Cho ra cả hai dạng mã nên dùng được cho dự án CSS thuần lẫn dự án theo lớp tiện ích

Cách tạo một đoạn chữ chuyển sắc

1. 1Gõ đúng nội dung bạn định dùng vào ô văn bản, đừng để chữ mẫu, vì độ dài chữ ảnh hưởng trực tiếp tới cách dải màu trải ra.
2. 2Bấm một bộ màu dựng sẵn để có điểm khởi đầu, sau đó tinh chỉnh từng màu bằng bảng chọn màu hoặc gõ mã màu.
3. 3Kéo thanh góc để đổi hướng chuyển sắc, lưu ý 90 độ là chuyển từ trái sang phải còn 180 độ là chuyển từ trên xuống dưới.
4. 4Đặt cỡ chữ và độ đậm gần với thiết kế thật, vì nét chữ càng mảnh thì dải màu càng khó nhận ra.
5. 5Sao chép đoạn CSS thuần rồi dán vào tệp định kiểu, hoặc lấy đoạn Tailwind nếu dự án của bạn dùng lớp tiện ích.

Cơ chế: ba dòng CSS làm nên hiệu ứng

Chữ chuyển sắc thực chất không phải là chữ được tô màu chuyển sắc. Trình tự như sau: bạn đặt cho phần tử một nền chuyển sắc phủ toàn bộ hộp, sau đó dùng background-clip với giá trị text để cắt nền đó theo đúng hình dạng của các chữ cái, cuối cùng đặt màu tô chữ thành trong suốt để lớp nền phía dưới lộ ra. Nếu thiếu dòng cuối, chữ vẫn giữ màu đen mặc định và che khuất hoàn toàn phần nền đã cắt, đây là lỗi phổ biến nhất khi người ta chép thiếu một dòng. Đoạn mã công cụ xuất ra có cả dòng viết theo tiền tố webkit lẫn dòng viết theo tên chuẩn, và nên giữ nguyên cả hai: dòng có tiền tố vẫn cần cho một số trình duyệt, trong khi dòng chuẩn là thứ được các trình duyệt mới dùng. Một hệ quả quan trọng của cơ chế này là dải màu được tính trên kích thước hộp của phần tử chứ không phải trên từng chữ cái, nên chữ nằm ở đâu trong hộp thì nhận màu ở đúng chỗ đó.

Góc chuyển sắc: 90 độ không phải là chéo

Trong CSS, góc của chuyển sắc tuyến tính được tính theo hướng mà màu đi tới, lấy mốc 0 độ là hướng lên trên rồi quay theo chiều kim đồng hồ. Vậy 0 độ cho chuyển sắc đi từ dưới lên, 90 độ đi từ trái sang phải, 180 độ đi từ trên xuống dưới, và 270 độ đi từ phải sang trái. Điều này hay gây nhầm với người quen công cụ thiết kế vì nhiều phần mềm lấy mốc khác. Với chữ một dòng, góc quanh 90 độ thường hợp lý nhất vì dải màu trải theo chiều dài dòng chữ, mỗi chữ cái nhận một sắc độ khác nhau. Góc 180 độ trên chữ một dòng thường cho hiệu ứng yếu vì chiều cao dòng chữ nhỏ, cả dòng gần như chỉ lấy được một khúc hẹp của dải màu. Ngược lại với tiêu đề nhiều dòng, góc dọc lại tạo hiệu ứng rõ vì hộp cao hẳn lên, và khi đó dòng trên với dòng dưới sẽ có màu khác nhau đáng kể; nếu bạn không muốn vậy thì nên tách từng dòng thành phần tử riêng.

Chọn cặp màu sao cho dải chuyển không bị xỉn ở giữa

Tám bộ dựng sẵn của công cụ đều có một đặc điểm chung đáng để ý: hai màu trong mỗi cặp nằm gần nhau trên vòng tròn màu. Cặp cam đỏ với cam vàng, cặp lam với lam nhạt, cặp tím với tím đậm. Đây không phải ngẫu nhiên. Khi bạn chọn hai màu đối nghịch nhau, chẳng hạn lam và cam, đường chuyển sắc phải đi ngang qua vùng xám ở giữa và kết quả là khúc giữa của dòng chữ trông bẩn và mất sức sống. Nguyên tắc dùng được là giữ hai màu trong khoảng chênh lệch vừa phải về sắc, và tạo khác biệt chủ yếu bằng độ sáng cùng độ bão hòa. Nếu bắt buộc phải nối hai màu xa nhau, cách xử lý là chèn thêm một điểm màu trung gian sáng và bão hòa nằm trên cung ngắn giữa hai màu; công cụ này chỉ nhận hai điểm màu nên bạn phải tự thêm điểm thứ ba vào đoạn mã sau khi sao chép. Một mẹo khác là giữ cả hai màu ở cùng mức độ sáng để dải chuyển trông đều, tránh cảm giác một đầu chữ nặng hơn đầu kia.

Tương phản và khả năng đọc: phần dễ bị bỏ quên

Chữ chuyển sắc làm cho việc kiểm tra độ tương phản trở nên rắc rối, vì màu chữ không còn là một giá trị duy nhất mà thay đổi dọc theo dòng. Ngưỡng của tiêu chuẩn tiếp cận nội dung web vẫn áp dụng, và cách xử lý đúng là kiểm tra ở đầu nhạt nhất của dải màu so với màu nền: nếu điểm yếu nhất đạt thì cả dòng đạt. Chữ thường cần tối thiểu 4,5 trên 1, còn chữ lớn từ khoảng 24 pixel trở lên hoặc từ 18,66 pixel nếu đã in đậm thì cần tối thiểu 3 trên 1. Hệ quả thực tế là hiệu ứng này hợp với tiêu đề lớn và không hợp với đoạn nội dung dài, cả vì lý do tương phản lẫn vì đọc lâu trên chữ đổi màu rất mỏi mắt. Còn một điểm kỹ thuật nữa: khi màu tô chữ đã trong suốt, mọi thứ dựa vào màu chữ đều thay đổi theo, nên gạch chân và chấm đầu dòng có thể biến mất hoặc hiển thị lạ. Nếu đoạn chữ chuyển sắc là một liên kết, hãy tạo gạch chân bằng đường viền dưới thay vì dựa vào gạch chân mặc định.

Hai điểm cần sửa tay trong đoạn Tailwind mà công cụ xuất ra

Đoạn mã Tailwind ở đây là điểm khởi đầu tiện lợi nhưng chưa phản ánh hết các lựa chọn của bạn, và nên nói rõ để bạn không dán vào rồi thắc mắc. Thứ nhất, hướng chuyển sắc trong đoạn đó cố định là từ trái sang phải, không đổi theo thanh trượt góc bạn vừa kéo. Nếu bạn chọn góc khác 90 độ, hãy đổi lớp hướng sang biến thể tương ứng, hoặc dùng cú pháp giá trị tùy ý để ghi đúng số độ. Thứ hai, độ đậm trong đoạn đó luôn là mức đậm tiêu chuẩn, không đổi theo lựa chọn của bạn ở ô độ đậm, nên hãy thay bằng lớp độ đậm đúng với con số mình chọn. Ngoài ra đoạn mã dùng thuộc tính className theo cách viết của React, nên nếu bạn đang làm HTML thuần thì đổi lại thành class. Cuối cùng, đoạn CSS thuần bên cạnh mới là bản đầy đủ nhất và phản ánh chính xác mọi lựa chọn, vì vậy khi nghi ngờ thì hãy lấy bản CSS làm chuẩn rồi tự chuyển sang lớp tiện ích.

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

Từ khóa liên quan

• tạo chữ gradient css
• gradient text generator
• background clip text
• webkit text fill color transparent
• chữ chuyển sắc css
• gradient text tailwind
• góc linear gradient css
• chữ gradient không hiện màu
• css gradient nhiều màu
• chữ gradient nhiều dòng
• tương phản chữ gradient
• tiêu đề gradient đẹp
• màu gradient đẹp cho web
• linear gradient là gì
• css text effect miễn phí
• chữ gradient trên dark mode
• copy css gradient text
• gradient typography
• hiệu ứng chữ bằng css
• tạo tiêu đề gradient online