Trình tạo Gradient CSS

Gradient là hình ảnh, không phải màu sắc

Một gradient CSS được tạo ra bởi các hàm linear-gradient, radial-gradient hoặc conic-gradient, và mỗi hàm tạo ra một giá trị hình ảnh, không phải một màu. Riêng sự thật đó giải thích phần lớn cách gradient hành xử. Vì kết quả là một hình ảnh, bạn gán nó cho một thuộc tính nhận hình ảnh, thường nhất là background hoặc background-image, và nó lát kề, co giãn cùng xếp chồng như bất kỳ hình nền nào khác. Nó cũng không có kích thước nội tại; nó lấp đầy bất cứ hộp nào bạn đặt nó vào, đó là lý do cùng một gradient có thể trông dốc trên một chiếc nút và dịu dàng trải khắp một khu vực hero.

Gradient tuyến tính và hướng

Một gradient tuyến tính pha trộn các màu dọc theo một trục thẳng. Bạn đặt trục đó bằng một góc hoặc bằng một hướng dạng từ khóa. Góc được đo theo chiều kim đồng hồ tính từ hướng thẳng lên, nên 0deg chạy từ dưới lên trên, 90deg chạy từ trái sang phải, và 180deg chạy từ trên xuống dưới. Các dạng từ khóa, chẳng hạn to right hay to bottom right, thường rõ ràng hơn cho những trường hợp đơn giản và có lợi thế là chỉ chính xác vào một góc, điều mà một góc cố định không làm được khi hộp thay đổi hình dạng.

Thanh trượt góc trong công cụ này viết ra giá trị độ cho bạn. Một mẹo tinh tế: một gradient chạy hơi chéo, đâu đó quanh 135deg, gần như luôn trông trau chuốt hơn so với một vùng pha trộn dọc hay ngang phẳng lì, bởi mắt người đọc đường chéo như ánh sáng quét xiên qua một bề mặt.

Gradient tỏa tròn và gradient hình nón

Một gradient tỏa tròn pha trộn lan ra từ một điểm trung tâm theo các vòng đồng tâm, lý tưởng cho hiệu ứng đèn rọi, lớp tối mờ dịu ở rìa, và những vầng sáng. Theo mặc định nó tạo thành một hình elip lấp đầy hộp, nhưng bạn có thể biến nó thành một vòng tròn hoàn hảo và dời tâm của nó, để một điểm nhấn sáng có thể nằm ở một góc thay vì chính giữa. Gradient tỏa tròn là lựa chọn tự nhiên mỗi khi ánh sáng hay tiêu điểm cần trông như phát ra từ một điểm duy nhất.

Một gradient hình nón quét các màu vòng quanh một tâm như những chiếc kim đồng hồ thay vì lan ra từ nó. Chính cú quét xoay tròn đó khiến gradient hình nón trở thành nền tảng cho biểu đồ hình tròn, vòng tròn màu, và vầng sáng hình nón ngày càng phổ biến được dùng làm điểm nhấn cho thẻ. Chính những điểm màu mà bạn đã hiểu vẫn được áp dụng; chỉ có hình học của cách chúng được bố trí là thay đổi giữa tuyến tính, tỏa tròn và hình nón.

Điểm màu và vị trí

Mỗi gradient được định nghĩa bởi các điểm màu, trong đó mỗi điểm là một màu kèm một vị trí tùy chọn dọc theo đường gradient, thường được viết dưới dạng phần trăm từ 0 đến 100. Với hai điểm bạn có một vùng pha trộn đơn giản; thêm nhiều điểm hơn cho phép bạn dẫn gradient đi qua nhiều màu. Nếu bạn bỏ qua vị trí, trình duyệt sẽ trải các điểm đều nhau, nhưng việc tự đặt chúng bằng tay mới là cách bạn kiểm soát chính xác từng màu nằm ở đâu và mỗi đoạn chuyển có bao nhiêu khoảng không.

Các vị trí không nhất thiết phải tăng đều, và đó chính là nơi gradient trở nên thú vị. Dồn hai điểm sát nhau tạo ra một đoạn chuyển nhanh, trong khi tách chúng ra xa tạo ra một đoạn chuyển chậm rãi, dịu dàng. Bạn thậm chí có thể cho hai điểm cùng một vị trí để loại bỏ hoàn toàn vùng pha trộn, và đó là chìa khóa cho kỹ thuật tiếp theo.

Điểm dừng cứng: sọc, dải và hình khối

Khi hai điểm màu liền kề có chung một vị trí, đoạn chuyển giữa chúng diễn ra trên một khoảng cách bằng không, tạo ra một mép sắc nét thay vì một vùng pha trộn. Lặp lại mẫu đó và bạn có được sọc, bàn cờ, thanh tiến trình, và những dải mã hóa theo màu, tất cả được vẽ bằng CSS mà không cần hình ảnh nào. Ví dụ, một gradient giữ một màu từ 0 đến 50 phần trăm và một màu thứ hai từ 50 đến 100 phần trăm sẽ cho bạn một sự phân tách hai tông màu sạch sẽ ở chính giữa.

Ghép điểm dừng cứng với repeating-linear-gradient hoặc repeating-radial-gradient thì mẫu sẽ tự động lát kề khắp hộp, nên bạn có thể dựng nên sọc kẹo, băng cảnh báo chéo, hay những đường dẫn mảnh từ một khai báo ngắn duy nhất. Vì đây là toán học vector chứ không phải một ảnh bitmap, nó vẫn sắc nét như dao cạo ở bất kỳ kích thước và mật độ điểm ảnh nào.

Độ trong suốt và xếp lớp

Các điểm dừng gradient có thể dùng màu kèm kênh alpha, và việc làm nhạt dần về một màu hoàn toàn trong suốt là một trong những nước đi hữu ích nhất bạn có thể thực hiện. Một gradient chạy từ một màu đặc về trong suốt tạo ra lớp che mờ mà bạn thấy phía sau chữ ở đáy một bức ảnh, hiệu ứng mờ dần ở rìa một danh sách đang cuộn, và những lớp mặt nạ ảnh mềm mại. Một điều cần lưu ý: trong vài cách nội suy màu, việc làm nhạt về màu trong suốt thuần có thể đi qua một điểm giữa xám xỉn, nên làm nhạt về chính màu đó ở mức alpha bằng không thay vì về một từ khóa transparent trơ trụi sẽ cho kết quả sạch hơn.

Vì gradient là hình ảnh, thuộc tính background chấp nhận nhiều gradient ngăn cách bởi dấu phẩy, được vẽ từ trước ra sau. Chồng một gradient trong suốt tinh tế lên trên một gradient nền chính là cách những hình nền hiện đại phong phú được dựng nên mà không cần một tệp ảnh nào.

Khả năng tiếp cận: chữ trên nền gradient

Rủi ro với gradient nằm bên dưới chữ của bạn. Độ tương phản có thể hoàn toàn ổn ở một đầu của gradient và thất bại nặng nề ở đầu kia, nên một dòng tiêu đề đọc được trên phần tối có thể biến mất trên phần sáng. Hãy luôn kiểm tra vùng tệ nhất, không phải vùng trung bình. Cách khắc phục chắc chắn là đặt một lớp che màu đặc bán trong suốt, hoặc một gradient chuyên dụng từ tối về trong suốt, giữa nền rối rắm và chữ để tỷ lệ tương phản luôn an toàn ở mọi nơi. Hãy coi điểm sáng nhất dưới chữ sáng màu, và điểm tối nhất dưới chữ tối màu, là giá trị bạn thật sự phải vượt qua.