Phát triển Web
CSS Gradient Generator
Tạo gradient tuyến tính, xuyên tâm hoặc hình nón từ nhiều màu và lấy CSS hoàn chỉnh.
0° — ở trên, sau đó theo chiều kim đồng hồ.
A CSS gradient is a smooth transition between multiple colors, generated by the browser itself with no image needed. This tool lets you visually build a linear, radial, or conic gradient and copy the finished CSS instantly.
How to use it
- Add color stops and drag them to fine-tune where each transition happens.
- Pick a gradient type — linear (a direction in degrees), radial (shape and center position), or conic (rotation around a point).
- Copy the finished CSS with one click and paste it into background or background-image.
Common uses
- Picking a background for a hero section or button without opening a graphics editor.
- Recreating a gradient from a design mockup (Figma, etc.) in exact CSS syntax.
- Quickly experimenting with color transitions before locking a choice into a design system.
Things to keep in mind
A radial gradient defaults to stretching into the shape of its element (an ellipse), not always staying a circle — worth accounting for on rectangular blocks.
Multiple gradients can be layered by listing them comma-separated in background-image — it works like stacked layers, with the first one in the list on top.
Bài viết về công cụ này: Gradient CSS: linear khác gì với radial và conic
Câu hỏi thường gặp
Sự khác biệt giữa gradient tuyến tính, xuyên tâm và hình nón là gì?
Gradient tuyến tính chuyển tiếp dọc theo một đường thẳng ở góc đã chọn, gradient xuyên tâm lan tỏa ra ngoài từ một điểm trung tâm dưới dạng hình tròn hoặc hình elip, còn gradient hình nón quét màu quanh một điểm trung tâm như bánh xe màu.
Gradient hình nón có được hỗ trợ trên mọi trình duyệt không?
Tất cả trình duyệt lớn hiện nay đều hỗ trợ gradient hình nón, nhưng đây là tính năng CSS mới hơn so với gradient tuyến tính hoặc xuyên tâm, nên các phiên bản trình duyệt rất cũ có thể không hiển thị được.
Tôi nhận được gì làm kết quả đầu ra?
Công cụ tạo ra cú pháp CSS background sẵn sàng sử dụng với màu sắc, điểm dừng và vị trí bạn đã chọn, bạn có thể dán trực tiếp vào stylesheet của mình.
repeating-linear-gradient khác gì với linear-gradient thông thường?
linear-gradient thông thường kéo giãn chuỗi màu của nó đúng một lần trên toàn bộ phần tử, trong khi repeating-linear-gradient lặp lại cùng một chuỗi điểm dừng màu theo chu kỳ, tạo ra nền sọc hoặc có họa tiết.
Tôi có thể xếp chồng nhiều gradient làm nền không?
Có, thuộc tính background-image chấp nhận một danh sách gradient phân tách bằng dấu phẩy, và chúng xếp chồng lên nhau theo cách tương tự như nhiều ảnh nền — gradient đầu tiên trong danh sách nằm trên cùng.