Cách tạo gradient CSS

Gradient CSS cho phép tạo các chuyển đổi màu mượt mà mà không cần tệp hình ảnh. Chúng nhẹ hơn hình ảnh, thích ứng hoàn hảo với mọi kích thước màn hình và đơn giản để tùy chỉnh.

Các loại gradient CSS

Gradient tuyến tính — các màu chuyển theo đường thẳng (trên xuống, trái-phải hoặc bất kỳ góc nào).

background: linear-gradient(135deg, #667eea, #764ba2);

Gradient xuyên tâm — các màu tỏa ra từ một điểm trung tâm theo mẫu tròn hoặc elip.

background: radial-gradient(circle, #667eea, #764ba2);

Gradient hình nón — các màu xoay quanh một điểm trung tâm, giống như một bánh xe màu.

background: conic-gradient(from 0deg, #667eea, #764ba2, #667eea);

Cách tạo gradient trực quan

1. Chọn loại gradient — chọn tuyến tính hoặc xuyên tâm và đặt góc hoặc vị trí.
2. Thêm các điểm dừng màu — nhấp để thêm màu ở các vị trí khác nhau của gradient. Điều chỉnh mỗi màu và vị trí của nó.
3. Sao chép CSS — sao chép mã được tạo và dán nó vào tệp kiểu của bạn.

Sử dụng một trình tạo trực quan nhanh hơn việc viết cú pháp bằng tay, đặc biệt với nhiều điểm dừng màu.

Các mẫu gradient phổ biến

Nền của phần hero — một gradient tinh tế hai màu thêm chiều sâu mà không gây phân tâm khỏi văn bản.

background: linear-gradient(135deg, #0f172a, #1e3a5f);

Điểm sáng nút — một gradient nhẹ tạo hiệu ứng ba chiều cho các nút.

background: linear-gradient(180deg, #3b82f6, #2563eb);

Lớp phủ trên hình ảnh — một lớp phủ gradient cải thiện khả năng đọc văn bản trên ảnh.

background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.7));

Đường viền nhấn — sử dụng một gradient làm đường viền để tạo sự thú vị thị giác.

border-image: linear-gradient(90deg, #667eea, #764ba2) 1;

Mẹo

• Giữ tinh tế — các gradient tốt nhất hầu như không thể nhận thấy. Một sự chuyển đổi nhẹ giữa hai màu tương tự thêm chiều sâu. Các gradient cầu vồng kịch tính hiếm khi trông chuyên nghiệp.
• Sử dụng gradient thay vì hình ảnh — một gradient CSS tải tức thì mà không có yêu cầu mạng. Thay thế các hình ảnh nền trang trí bằng gradient khi có thể.
• Kiểm tra ở chế độ tối — các gradient hoạt động tốt trên nền sáng có thể bị mờ hoặc xung đột ở chế độ tối. Định nghĩa các gradient khác nhau cho mỗi chủ đề nếu cần.
• Cẩn thận với độ tương phản văn bản — nếu bạn đặt văn bản trên một gradient, hãy xác minh rằng nó vẫn dễ đọc trên toàn bộ phạm vi của gradient, không chỉ trên phần sáng nhất hoặc tối nhất.