Tạo Gradient CSS Online
Tạo linear, radial, conic gradient đẹp — copy code CSS ngay lập tức.
📖 Hướng Dẫn Sử Dụng
- Chọn kiểu gradient: Linear (gradient thẳng), Radial (gradient tỏa từ trung tâm), Conic (gradient xoay tròn)
- Chỉnh góc (với linear gradient) bằng thanh kéo
- Thay đổi màu sắc và vị trí của từng color stop
- Click vào preset có sẵn để áp dụng nhanh
- Nhấn Copy CSS Code và dán vào file CSS của bạn
❓ Câu Hỏi Thường Gặp
CSS gradient có hoạt động trên tất cả trình duyệt khôngũ
Linear và radial gradient được hỗ trợ trên tất cả trình duyệt hiện đại: Chrome, Firefox, Safari, Edge từ năm 2012 trở đi. Conic gradient mới hơn, hỗ trợ từ Chrome 69+, Safari 12.1+, Firefox 83+. Với các trình duyệt cũ, có thể thêm fallback bằng màu nền đơn.
Gradient CSS có ảnh hưởng đến hiệu năng website khôngũ
Gradient CSS được render bởi GPU của trình duyệt, rất nhẹ và không ảnh hưởng đáng kể đến hiệu năng. Đây là lý do gradient CSS được ưa chuộng hơn ảnh nền gradient — không tốn băng thông, scale mượt ở mọi độ phân giải, và thay đổi dễ dàng qua CSS.
Color stop là gì trong CSS gradientừ
Color stop là điểm dừng màu trong gradient.
Ví dụ linear-gradient(#ff0, 20%, #f00) — màu vàng bắt đầu từ 0%, chuyển sang màu đỏ kết
thúc ở 100%, với 20% là vị trí trung gian. Bạn có thể thêm nhiều color stop để tạo gradient phức tạp
với nhiều màu sắc.