🌈

tạo gradient CSS

Tạo và xem trước gradient CSS tuyến tính và hướng tâm. Sao chép mã CSS sẵn dùng.

Công cụ thiết kế Chạy cục bộ Không gửi dữ liệu
Gradient CSS tuyến tính hình tròn thiết kế
Loại gradient
Hướng
●
Điểm dừng màu
Đầu ra CSS

Tạo gradient CSS là gì?

Tạo và xem trước gradient CSS tuyến tính và hình tròn. Thêm điểm dừng màu, chọn hướng và sao chép mã CSS sẵn dùng ngay lập tức.

Cách sử dụng Trình tạo gradient

  1. Chọn loại gradient tuyến tính hoặc xuyên tâm.
  2. Thêm hoặc điều chỉnh các điểm dừng màu cho đến khi màu chuyển trông ưng ý.
  3. Tinh chỉnh các giá trị góc, vị trí hoặc độ lan trong bản xem trước trực tiếp.
  4. Sao chép CSS được tạo khi bạn sẵn sàng dùng trong dự án.

Công cụ liên quan

🎨
tạo bảng màu
Tạo bảng màu bổ sung, tương tự và bộ ba
 🎨
chọn màu
Chuyển đổi màu giữa HEX, RGB, HSL và CMYK
 ⚖️
kiểm tra contrast WCAG
Kiểm tra tỷ lệ tương phản màu WCAG AA và AAA để đảm bảo khả năng tiếp cận
Hiểu về CSS Gradients ▾
Ví dụ
Đầu vào Linear, 90°, điểm dừng: #6366F1 → #8B5CF6
Đầu ra background: linear-gradient(90deg, #6366F1, #8B5CF6);
Các trường hợp sử dụng phổ biến
  • Tạo gradient nền hero cho các trang marketing
  • Kiểm tra điều chỉnh góc và điểm dừng trước khi chỉnh sửa tệp CSS
  • Tạo nền nút hoặc card chỉn chu
  • Chia sẻ CSS gradient chính xác với nhà phát triển mà không cần chuyển đổi thủ công
Câu hỏi thường gặp
Tôi có cần tiền tố nhà cung cấp như -webkit-linear-gradient không?

Không — tất cả trình duyệt hiện đại (Chrome, Firefox, Safari, Edge) đều hỗ trợ gradient CSS không cần tiền tố. Tiền tố nhà cung cấp chỉ cần cho các trình duyệt rất cũ (IE 9 trở xuống).

Tôi có thể dùng điểm dừng màu trong suốt không?

Có — dùng màu rgba() hoặc hsla() với giá trị alpha bằng 0 để tạo hiệu ứng mờ dần sang trong suốt. Ví dụ: rgba(99, 102, 241, 0) làm màu chàm mờ dần đến vô hình.

Tôi có thể dùng gradient này cho văn bản không?

Có — sao chép giá trị gradient và dùng với thuộc tính CSS: background: linear-gradient(...); -webkit-background-clip: text; -webkit-text-fill-color: transparent;

Số điểm dừng màu tối đa là bao nhiêu?

Công cụ này hỗ trợ tối đa 6 điểm dừng màu. Bản thân CSS không có giới hạn cứng — trình duyệt hỗ trợ gradient với hàng chục điểm dừng, mặc dù hiệu năng có thể thay đổi.