Tạo gradient CSS

Đặt thuộc tính background thành một hàm gradient, ví dụ background: linear-gradient(90deg, #ff7e5f, #feb47b). Giá trị đầu tiên là hướng, sau đó là các màu, mỗi màu có thể kèm vị trí tùy chọn.

Gradient linear đổi màu dọc theo một đường thẳng, gradient radial lan ra từ một điểm giữa, còn gradient conic quét quanh một điểm giữa giống bánh xe màu hoặc biểu đồ tròn.

0deg chạy từ dưới lên trên, 90deg từ trái sang phải, 180deg từ trên xuống dưới và 270deg từ phải sang trái. Với gradient conic, góc quyết định điểm bắt đầu quét.

Cho hai điểm màu liền kề cùng một vị trí, ví dụ đỏ 50% và xanh 50%. Màu sẽ chuyển đột ngột tại điểm đó thay vì hòa trộn.

Gradient linear và radial chạy được trên mọi trình duyệt hiện nay. Gradient conic cần Chrome 69, Firefox 83 hoặc Safari 12.1 trở lên. CSS ở đây luôn bắt đầu bằng một dòng màu đặc làm phương án dự phòng.

Bạn có thể tạo hiệu ứng chuyển động cho background-position hoặc background-size trên một gradient khổ lớn để tạo cảm giác di chuyển. Tạo hiệu ứng chuyển động cho chính màu các điểm cần dùng quy tắc CSS @property hoặc một đoạn script nhỏ, vì trình duyệt không thể tự nội suy giữa hai giá trị gradient đầy đủ.

Được. Sao chép CSS gradient ở đây vào background, rồi thêm background-clip: text và color: transparent cho phần tử chữ để gradient hiện ra qua từng con chữ thay vì tô kín một ô hình chữ nhật.