Trình tạo gradient CSS miễn phí trực tuyến

Gradient CSS đã trở thành cách nhẹ nhất và linh hoạt nhất để trang trí nền, nút hoặc thẻ. Không cần xuất PNG từ trình chỉnh sửa hình ảnh: trình duyệt tính toán chuyển tiếp giữa các màu, ở dạng vector, chỉ nặng vài chục byte. Trình tạo gradient CSS của Volade tạo ra code chính xác — góc, điểm dừng, vị trí gốc — trong khi bạn compos trên màn hình.

linear-gradient: gradient có hướng

Hàm linear-gradient() nhận một góc theo sau là các điểm dừng: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%). Góc 0deg hướng lên trên, 90deg hướng sang phải, 180deg hướng xuống dưới. Không có góc, trình duyệt đi từ trên xuống. Đây là cú pháp được sử dụng nhiều nhất cho header, nút kêu gọi hành động và băng chuyền phần.

radial-gradient: quầng sáng và ellipse

Hàm radial-gradient() bắt đầu từ một điểm (mặc định là tâm) và lan tỏa theo hình tròn hoặc ellipse. Vị trí gốc được ghi là at X% Y%: radial-gradient(circle at 50% 50%, …). Hoàn hảo cho hiệu ứng quầng sáng đằng sau tiêu đề, nền hero nhắm vào tâm hoặc bóng đổ mềm tổng hợp. Công cụ cung cấp hai thanh trượt X và Y để đặt gốc chính xác đến từng pixel.

conic-gradient: xoay quanh một điểm

Hàm conic-gradient() xoay quanh một điểm, giống kim đồng hồ. Nó được viết là conic-gradient(from 90deg at 50% 50%, …) và cho phép tạo vòng tròn, đồng hồ đo tròn, viền nhiều màu hoặc hiệu ứng lăng kính. Mỗi điểm dừng chiếm một Sector góc: bằng cách đặt nhiều màu, bạn vẽ biểu đồ tròn CSS mà không cần một hình ảnh nào.

Điểm dừng màu (color stops)

Mỗi điểm dừng liên kết một màu và một vị trí phần trăm: #7a2fe2 0%, #a358ee 55%, #f3e8ff 100%. Vị trí giống nhau cho hai màu tạo ra chuyển tiếp rõ ràng (cạnh cứng); khoảng cách xa hơn tạo ra chuyển tiếp dần dần. Nhiều hơn hai điểm dừng cho phép bảng màu đa sắc, dải màu hoặc mô phỏng vật liệu (kim loại, xà cừ, cực quang).

Chồng gradient và chuẩn bị giá trị dự phòng

Trong viết tắt background, thứ tự quan trọng: tiền cảnh trước. Lớp phủ tối trên ảnh được viết là background: linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,0)), url(photo.webp);. Luôn đặt màu đồng nhất làm giá trị dự phòng (background-color) cho trình duyệt rất cũ hoặc trong khi tải hình ảnh.

Thực hành hiệu năng tốt

Gradient CSS được tính lại mỗi khi thay đổi kích thước: giữ số điểm dừng hợp lý (2 đến 5 là đủ trong 90% trường hợp) và tránh xếp chồng nhiều lớp trên diện tích rất lớn trên thiết bị di động. Ưu tiên các giá trị thập lục phân hoặc HSL ổn định, và đóng băng góc ngay khi thiết kế được phê duyệt để tránh sự khác biệt nhỏ giữa các trình duyệt.

Gradient theo bảng hướng dẫn Volade

Để xây dựng bảng màu nhất quán trước khi tạo gradient, hãy sử dụng trình tạo bảng màu và bộ chọn màu : xác định các tông màu thương hiệu, rồi dán chúng vào đây làm điểm dừng. Kết quả được sao chép trực tiếp vào CSS, design system hoặc theme của bạn — trên cả máy tính và thiết bị di động, không cần tài khoản và không gửi dữ liệu.