Tạo gradient CSS trực quan

CSS Gradient là gì?

CSS gradient cho phép bạn tạo các chuyển đổi mượt mà giữa hai hoặc nhiều màu mà không cần sử dụng hình ảnh. Trình duyệt tự tính toán và vẽ gradient theo thời gian thực, giúp trang web tải nhanh hơn so với việc dùng ảnh nền, đồng thời giữ được độ sắc nét trên mọi kích thước màn hình.

CSS hỗ trợ ba loại gradient chính: linear-gradient (chuyển màu theo đường thẳng), radial-gradient (tỏa ra từ tâm), và conic-gradient (quét quanh một điểm như kim đồng hồ). Mỗi loại phù hợp với các mục đích thiết kế khác nhau.

Cách linear-gradient hoạt động

Linear gradient tạo chuyển màu dọc theo một đường thẳng từ điểm bắt đầu đến điểm kết thúc. Bạn kiểm soát hướng bằng cách đặt góc (0deg = từ dưới lên, 90deg = từ trái sang phải, 180deg = từ trên xuống). Các color stop xác định vị trí mỗi màu dọc theo trục gradient.

Cú pháp cơ bản: linear-gradient(angle, color1 position, color2 position, ...)

Ví dụ: linear-gradient(135deg, #db2777 0%, #7c3aed 50%, #2563eb 100%) tạo gradient chéo từ hồng sang tím rồi sang xanh dương.

Radial và Conic gradient

Radial gradient tỏa màu ra từ một điểm trung tâm theo hình tròn hoặc elip. Rất phù hợp cho hiệu ứng ánh sáng, nền nút bấm, và các phần tử UI tròn. Bạn có thể điều chỉnh hình dạng (circle hoặc ellipse) và vị trí tâm.

Conic gradient quét màu quanh một điểm giống như quạt giấy hoặc biểu đồ tròn. Đây là loại gradient mới nhất, được hỗ trợ trên tất cả trình duyệt hiện đại từ 2020. Rất tuyệt cho biểu đồ tròn CSS-only, vòng màu, và các hiệu ứng nghệ thuật.

Kỹ thuật gradient nâng cao

• Gradient text: Kết hợp background-clip: text với -webkit-text-fill-color: transparent để tạo chữ gradient đẹp mắt cho tiêu đề.
• Gradient border: Dùng border-image hoặc trick pseudo-element với gradient để tạo viền màu sắc.
• Xếp chồng gradient: Bạn có thể xếp nhiều gradient lên nhau bằng cách phân tách bằng dấu phẩy trong thuộc tính background.
• Gradient animation: Thay đổi background-position hoặc background-size để tạo hiệu ứng gradient chuyển động mượt mà.
• Hard color stops: Đặt hai màu ở cùng một vị trí (ví dụ red 50%, blue 50%) để tạo đường cắt sắc nét thay vì chuyển đổi mượt.

Gradient trong thiết kế web hiện đại

Gradient đã trở thành một phần thiết yếu của thiết kế web hiện đại. Các thương hiệu lớn như Instagram, Spotify, và Stripe đều sử dụng gradient làm điểm nhấn thương hiệu. Gradient giúp tạo chiều sâu, phân cấp thông tin, và thu hút sự chú ý mà không cần dùng hình ảnh nặng.

Khi thiết kế gradient, hãy tuân thủ các nguyên tắc: chọn 2-3 màu liền kề trên vòng màu để có chuyển đổi tự nhiên, tránh kết hợp màu bổ sung (đối nhau) vì sẽ tạo vùng xám ở giữa, và luôn kiểm tra contrast để đảm bảo text vẫn đọc được trên nền gradient.