Cách dùng Tạo CSS Gradient
- Chọn một mẫu có sẵn hoặc bắt đầu từ gradient mặc định.
- Chọn Linear, Radial hoặc Conic rồi chỉnh góc, hình dạng hoặc vị trí.
- Chỉnh các điểm màu: nhấp vào thanh để thêm điểm, kéo tay cầm để di chuyển, hoặc nhập trực tiếp màu và vị trí chính xác trong danh sách.
- Tùy chọn: chọn nội suy OKLab/OKLCH để các màu chuyển mượt hơn, rồi nhấp Sao chép CSS.
CSS gradient là gì?
CSS gradient là một hình ảnh do trình duyệt tạo ra, chuyển dần giữa hai hoặc nhiều màu. Vì nó là một <image>, bạn dùng nó trong background, background-image, border-image hoặc mask-image, chứ không dùng trong background-color. Gradient không cần gửi yêu cầu HTTP, luôn sắc nét ở mọi kích thước và có thể làm hoạt ảnh hoặc xếp lớp.
Gradient tuyến tính, radial và conic
| Loại | Ví dụ | Cách dùng thường gặp |
|---|---|---|
| Linear | linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%) | Nền banner, nút bấm, lớp phủ trên ảnh |
| Radial | radial-gradient(circle at top, #fff 0%, #312e81 100%) | Hiệu ứng ánh sáng, quầng sáng, vignette |
| Conic | conic-gradient(from 0deg at center, red, yellow, lime, aqua, blue, magenta, red) | Bánh xe màu, biểu đồ tròn, icon loading |
Với gradient tuyến tính, 0deg hướng lên trên và 90deg hướng sang phải (tương đương to right). Góc của conic bắt đầu từ phía trên và quay theo chiều kim đồng hồ.
Điểm màu và cạnh cứng
Mỗi điểm màu gồm một màu và một vị trí tùy chọn. Khi hai điểm có cùng vị trí, phần chuyển màu trở thành cạnh cứng, đó là cách tạo sọc hoặc mẫu Biểu đồ tròn: #4f46e5 0% 40%, #22c55e 40% 75%. Để nội dung mờ dần vào nền trang, hãy kết thúc bằng phiên bản trong suốt của cùng màu (ví dụ #00000000), cách này tránh được dải xám bẩn.
Gradient mượt hơn với OKLab và OKLCH
Mặc định, trình duyệt nội suy trong sRGB, nên chuyển từ xanh dương sang vàng sẽ đi qua một vùng xám xỉn. CSS Color 4 cho phép bạn chọn không gian màu: linear-gradient(90deg in oklab, blue, yellow) giữ màu tươi và đều, còn in oklch chạy theo vòng màu sắc. Công cụ xuất khai báo sRGB đơn giản trước, rồi đến bản nội suy sau, nên trình duyệt nào không hiểu cú pháp mới sẽ bỏ qua dòng cuối.
Dùng gradient trong Webflow
Bảng Style của Webflow có sẵn trình chỉnh gradient tuyến tính và radial trong mục Backgrounds. Bạn có thể sao chép góc và màu điểm từ công cụ này vào đó. Với những thứ bảng không hỗ trợ, như conic gradient hay nội suy in oklch, hãy dán CSS vào khối <style> trong phần tử Embed hoặc vào mã tùy chỉnh của trang, rồi nhắm đến class của bạn. Cần bóng đổ phù hợp? Thử Box Shadow Generator, hoặc kiểm tra độ tương phản của chữ đặt trên gradient bằng Contrast Checker.
Cũng được tìm dưới tên: css gradient generator, linear-gradient, radial-gradient, conic-gradient, màu gradient css, gradient maker, oklch gradient, gradient webflow.
Các công cụ dùng kèm tốt với Tạo CSS Gradient
- Trình tạo pattern SVG — Thêm chút họa tiết tinh tế cho section và card bằng mẫu SVG liền mạch: chấm bi, lưới, đường chéo, zigzag, sóng, dấu cộng, bàn cờ, hình tròn, tam giác và nhiều kiểu khác.
- Chuyển đổi mã màu — Dán bất kỳ màu CSS nào — HEX, rgb(), hsl(), hwb(), oklch() hoặc tên màu như tomato — và nhận ngay mọi định dạng còn lại, kèm bảng màu 50–950 sẵn sàng dùng.
- SVG sang CSS — Dán SVG vào để nhận data URI gọn đã mã hóa URL, cùng sẵn CSS background-image và mask-image có thể đổi màu.
- Trình Tạo Ảnh OG — Tạo ảnh xem trước liên kết đẹp mắt cho Facebook, LinkedIn, X, Slack và WhatsApp chỉ trong vài giây.
Câu hỏi thường gặp
Làm thế nào để gradient trong suốt?
linear-gradient(180deg, rgb(0 0 0 / 0.7), rgb(0 0 0 / 0)). Chuyển dần về cùng màu với alpha bằng 0 sẽ tránh được dải xám mà từ khóa transparent có thể gây ra trên các trình duyệt cũ.Tại sao gradient của tôi bị bẩn hoặc xám ở giữa?
Tôi có thể áp dụng gradient cho chữ không?
background-clip: text; -webkit-background-clip: text; color: transparent;. Nên giữ một color đặc làm phương án dự phòng để đảm bảo dễ đọc, và kiểm tra độ tương phản với nền trang.Tại sao CSS có màu nền đặc ở đầu?
Làm thế nào để tạo hoạt ảnh cho CSS gradient?
background-position trên một gradient có kích thước lớn hơn khung, hoặc đăng ký custom property bằng @property rồi tạo hoạt ảnh cho màu điểm hoặc góc.