Tạo gradient CSS

Công cụ này làm gì

Gradient CSS là nền chuyển dần từ màu này sang màu khác, được viết bằng chữ chứ không phải ảnh. Công cụ này cho bạn dựng gradient bằng mắt: chọn dạng tuyến tính, tỏa tròn hoặc hình nón, đặt các điểm màu trên thanh, và mã CSS hiện ngay bên dưới để sao chép vào tệp style. Cùng gradient đó có thể lưu thành PNG với kích thước tối đa 4096 điểm ảnh mỗi cạnh, tiện cho ảnh chia sẻ, hình nền hoặc bản thiết kế. Không có gì được tải lên: gradient được vẽ ngay trong trình duyệt.

Cách dùng

1. Chọn Tuyến tính, Tỏa tròn hoặc Hình nón, hoặc bắt đầu từ một mẫu có sẵn.
2. Bấm vào thanh để thêm điểm màu và kéo để di chuyển. Điểm đang chọn được chỉnh ở các ô bên dưới: màu (bảng chọn hoặc mã hex), độ đục và vị trí chính xác. Phím mũi tên dịch điểm 1%, giữ Shift thì dịch 10%.
3. Đặt hướng hoặc tâm. Bật Lặp lại để lát mẫu.
4. Bấm Sao chép CSS, hoặc chọn kích thước rồi Tải PNG.

Tuyến tính, tỏa tròn và hình nón

Gradient tuyến tính chạy dọc một đường. Góc đo theo chiều kim đồng hồ từ hướng lên: 0deg là lên, 90deg là sang phải, 180deg là xuống. Mặc định ở đây là 135deg, từ góc trên bên trái đến góc dưới bên phải. Bạn cũng có thể dùng từ khóa như to right. Từ khóa góc không phải một góc cố định: trong hình vuông to top right là 45deg, nhưng trong khung rộng 200 và cao 100 điểm ảnh, trình duyệt đổi nó thành khoảng 26,57deg để hai góc không phải đích có đúng màu ở giữa.

Gradient tỏa tròn lan ra từ một tâm. Hình dạng là tròn hoặc elip, còn kích thước cho biết điểm màu cuối rơi ở đâu: cạnh gần nhất, cạnh xa nhất, góc gần nhất hoặc góc xa nhất. Nếu không nêu kích thước, CSS dùng elip chạm góc xa nhất.

Gradient hình nón quét quanh tâm như kim đồng hồ. Vị trí điểm màu tính trên cả vòng, nên 25% là một phần tư vòng. Đặt góc bắt đầu sẽ xoay cả vòng quét. Gradient hình nón với điểm màu sắc nét là cách quen thuộc để vẽ biểu đồ tròn hoặc vòng màu chỉ bằng CSS.

Điểm màu, cạnh cứng và lặp lại

Mỗi điểm màu có một màu và một vị trí, từ 0% ở đầu đến 100% ở cuối. Hai điểm cùng vị trí tạo cạnh cứng thay vì chuyển mượt, đó là cách vẽ sọc. Mẫu Sọc là repeating-linear-gradient(45deg, #fde68a 0%, #fde68a 10%, #f59e0b 10%, #f59e0b 20%): một dải vàng và một dải cam, tổng 20% đường gradient, được lát cho đến khi đầy khung. Trên khung 100 x 100 điểm ảnh, đường dài 141,42 điểm ảnh nên mẫu lặp lại sau mỗi 28,28 điểm ảnh.

Nếu liệt kê điểm màu lộn xộn, trình duyệt đẩy điểm đứng trước lên cùng vị trí với điểm sau nó. Công cụ này tránh bất ngờ đó bằng cách luôn ghi các điểm màu theo thứ tự vị trí.

Độ trong suốt và định dạng màu

Độ đục là một phần của mỗi điểm màu. Trình duyệt trộn màu ở dạng nhân trước alpha, nên chuyển từ đỏ sang hoàn toàn trong suốt vẫn giữ nguyên màu đỏ và chỉ mờ dần: ở giữa là đỏ với độ đục 50%, không phải đỏ sẫm xỉn. Ảnh PNG tải về theo cùng quy tắc. Màu đục hoàn toàn được ghi là #rrggbb; khi có độ trong suốt bạn chọn mã hex tám chữ số như #ff000080 hoặc rgba(255, 0, 0, 0.5), hai cách có nghĩa như nhau.

Tiền tố, PNG và điều cần biết

Các trình duyệt hiện nay hiểu linear-gradient() và radial-gradient() không cần tiền tố nhà cung cấp từ khoảng năm 2013, nên mã từ trang này không cần bản -webkit-. conic-gradient() mới hơn (Chrome 69, Safari 12.1, Firefox 83) và được mọi trình duyệt hiện nay hỗ trợ. Ảnh PNG được vẽ trên canvas từ cùng các điểm màu nên khớp với bản xem trước. Để làm bóng cho khung có gradient, xem tạo box shadow; để kiểm tra chữ còn đọc được trên nền, dùng công cụ màu sắc.