Tạo CSS Gradient miễn phí
Tạo gradient CSS tuyến tính, hướng tâm và cônic với xem trước trực tiếp. Sao chép CSS chỉ bằng một cú nhấp.
background: linear-gradient(135deg, #14b8a6 0%, #6366f1 100%);Tránh điểm giữa màu xám giữa các màu rất khác nhau. Thêm một dòng sRGB thông thường làm phương án dự phòng cho trình duyệt cũ.
Mẫu có sẵn
Công dụng phổ biến
- Tạo Gradient cho Phần HeroThiết kế hình nền gradient toàn trang cho các phần hero trang web và trang đích.
- Tạo Nút Gradient và CTAThiết kế hình nền nút gradient bắt mắt cho các lời kêu gọi hành động nổi bật.
- Tạo Hình Nền Gradient cho ThẻThiết kế hình nền gradient cho thẻ, modal, thanh bên và hình nền thành phần UI.
- Tạo Gradient cho Đồ Họa Truyền Thông Xã HộiThiết kế hình nền gradient sống động cho các bài đăng Instagram, hình thu nhỏ YouTube và thẻ Twitter.
- Tạo Thang Màu cho Biểu ĐồTạo thang màu gradient cho bản đồ nhiệt, thanh tiến trình và trực quan hóa dữ liệu.
Cách hoạt động
Công cụ tạo gradient xây dựng chuỗi CSS gradient trực tiếp trong trình duyệt — không thư viện, không máy chủ, không tải lên. Một hàm tự viết tạo cú pháp linear-gradient, radial-gradient hoặc conic-gradient đúng từ các điểm dừng màu và góc của bạn theo thời gian thực, rồi định dạng kết quả cho đầu ra bạn chọn.
- 1Cấu hình điểm dừng và hướngBạn đặt từ 2 đến 6 điểm dừng màu bằng bộ chọn màu gốc của trình duyệt, rồi đặt vị trí mỗi điểm dừng dọc trục 0–100% bằng thanh trượt. Với gradient tuyến tính và hình nón, bạn cũng chọn góc (0–360°); với gradient tỏa tròn, bạn chọn hình dạng (ellipse hoặc circle) và từ khóa kích thước quyết định gradient lan rộng đến đâu.
- 2buildCss tạo chuỗi gradientMỗi khi thay đổi, hàm buildCss cục bộ nối các tham số thành lệnh gọi hàm CSS đúng — ví dụ linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%). Không dùng thư viện; chuỗi được tạo bằng logic template JavaScript thuần và nối trực tiếp từ mảng điểm dừng.
- 3Xem trước trực tiếp qua style nội tuyếnChuỗi gradient đã tạo được áp dụng trực tiếp cho phần tử div làm style background nội tuyến, để chính bộ máy CSS của trình duyệt hiển thị bản xem trước. Không dùng canvas hay ảnh — những gì bạn thấy chính là thuộc tính CSS đang được áp dụng.
- 4Đầu ra sẵn sàng sao chép ở bốn định dạngBộ chọn định dạng biến cùng chuỗi gradient thành CSS thuần (background: ...), khối CSS có màu đơn dự phòng, lớp giá trị tùy ý của Tailwind hoặc khai báo biến SCSS. Nhấp Sao chép sẽ ghi đầu ra đã chọn vào bộ nhớ tạm qua navigator.clipboard.writeText. Gradient hiện tại cũng được mã hóa vào hash URL để bạn đánh dấu hoặc chia sẻ.
Công cụ liên quan
Trình Tạo Lưới CSS
Thiết kế trực quan một lưới CSS — các track, đơn vị và khoảng cách — và sao chép CSS và HTML được tạo.
Trình Tạo CSS Flexbox
Thử nghiệm hướng flex, xuống dòng, căn chỉnh trên các mục trực tiếp — và sao chép CSS.
Máy tính Ma trận
Cộng, trừ, nhân, chuyển vị, nghịch đảo và rút gọn ma trận, cùng định thức, hạng, giá trị riêng và giải Ax = b — tối đa 8×8, sao chép một chạm. Miễn phí và riêng tư.