CSS Gradient Generator
Trình tạo dải chuyển sắc CSS Gradient trực tuyến hỗ trợ Linear, Radial, Conic với mã xuất tự động cho CSS và Tailwind CSS.
Thông số đầu vào
Kết Quả Tức Thì
/* 1. Vanilla CSS Declaration */ /* Fallback color for older browsers */ background-color: #6366f1; /* Modern CSS Gradient */ background-image: linear-gradient(90deg, #6366f1 0%, #a855f7 50%, #ec4899 100%); /* 2. Tailwind CSS Classes */ className="bg-gradient-to-r from-[#6366f1] via-[#a855f7] to-[#ec4899]"
Chi tiết
Lời giải
Configured linear gradient geometry: angle 90deg.
Interpolated color stops: #6366f1 (0%) -> #a855f7 (50%) -> #ec4899 (100%).
Generated cross-browser CSS background declaration: linear-gradient(90deg, #6366f1 0%, #a855f7 50%, #ec4899 100%).
Extracted Tailwind CSS utility classes: bg-gradient-to-r from-[#6366f1] via-[#a855f7] to-[#ec4899].
Giải Đáp Nhanh & Ý Nghĩa Chỉ Số
Công cụ CSS Gradient Generator giúp bạn thiết kế dải chuyển sắc màu sắc mượt mà (Linear, Radial, Conic) với góc nghiêng và điểm dừng tùy chỉnh, tự động xuất mã Vanilla CSS chuẩn và class Tailwind CSS trong 0ms.
Các Dạng Dải Màu Chuyển Sắc Hỗ Trợ
- Linear Gradient (Đường Thẳng): Chuyển màu dọc theo đường thẳng định hướng bằng góc (ví dụ: 90deg, 135deg, 45deg) hoặc hướng (to right, to bottom).
- Radial Gradient (Hình Tròn / Elip): Dải màu tỏa đều từ tâm hình tròn hoặc hình elip lan tỏa ra các cạnh ngoài.
- Conic Gradient (Hình Nón): Chuyển màu xoay quanh trục tâm 360 độ, cực kỳ thích hợp làm bảng màu, biểu đồ tròn và hiệu ứng viền phát sáng.
- Tự Động Sinh Class Tailwind CSS: Tự động ánh xạ góc nghiêng và mã màu sang class Tailwind (bg-gradient-to-r from-indigo-500 to-purple-500).
Ứng Dụng Trong Lập Trình Giao Diện Web
- Ảnh Nền Hero Section: Tạo nền chuyển sắc tương phản cao cho trang chủ landing page.
- Nút Bấm & Thẻ Card Nổi Bật: Thiết kế nút bấm CTA, huy hiệu badge và đường viền phát sáng hiện đại.
Tùy chỉnh mã màu, góc nghiêng và vị trí stop ở bảng phía trên để xem trước dải màu và copy mã CSS tức thì.
Công thức & Cơ chế tính toán
Công thức toán họcQuy chuẩn kỹ thuật W3C:
- Trình duyệt nội suy vector màu sắc sRGB/OKLAB giữa các điểm dừng tỷ lệ phần trăm dọc theo trục gradient.
Hướng dẫn từng bước
Chọn Kiểu Dải Màu
Lựa chọn dạng Linear (hướng thẳng), Radial (hình tròn tâm) hoặc Conic (xoay quanh trục).
Chọn Mã Màu & Vị Trí Dừng
Nhập mã màu HEX/RGBA cho màu bắt đầu, màu giữa và màu kết thúc kèm vị trí %.
Căn Chỉnh Góc Nghiêng (Angle)
Xoay góc nghiêng theo độ (ví dụ: 90deg cho chiều ngang, 135deg cho đường chéo).
Sao Chép Mã CSS & Tailwind
Nhấn 1-Click Copy để lấy đoạn mã CSS background hoặc class Tailwind dán vào dự án.
Bảng ví dụ minh họa
| Ví dụ | Giá trị đầu vào | Kết quả tính | Giải thích chi tiết |
|---|---|---|---|
| Dải màu Linear Indigo-Purple-Pink hiện đại (90 độ) | Dải màu chuyển tiếp ngang 3 màu rực rỡ kèm class Tailwind tương đương 'bg-gradient-to-r from-[#6366f1] via-[#a855f7] to-[#ec4899]'. | ||
| Dải màu Biển Sâu Cyan đến Xanh Đậm (135 độ) | Dải màu đường chéo dịu mắt với class Tailwind 'bg-gradient-to-br from-[#06b6d4] via-[#3b82f6] to-[#1e3a8a]'. |
Câu hỏi thường gặp
Phương Pháp Luận Khoa Học & Nguồn Dữ Liệu Đối Chiếu
Tổ Chức W3C - Đặc Tả Kỹ Thuật CSS Images Module
Tài Liệu Lập Trình Web MDN Web Docs
Chuẩn quy chiếu: Tiêu chuẩn kỹ thuật quy chuẩn ISO / W3C / IETF
Công thức: linear-gradient(θ, C_1 p_1%, C_2 p_2%, ...), radial-gradient(shape at center, C_1 p_1%, C_2 p_2%)
Ngày kiểm duyệt: 21 Tháng 8, 2026
Cơ quan ban hành: Tổ Chức W3C - Đặc Tả Kỹ Thuật CSS Images Module
Tài liệu đối chiếu: Tài Liệu Lập Trình Web MDN Web Docs
Bảo mật & Tính toán: 100% xử lý tức thì trên thiết bị, không lưu dữ liệu cá nhân
Kết quả tính toán được mô phỏng theo các công thức quy chuẩn toán học và khoa học. Vui lòng đối soát với tài liệu kỹ thuật chuyên ngành khi áp dụng vào các dự án chuyên sâu.
Công Cụ, Phương Pháp Luận & Bài Viết Cùng Chủ Đề
Kết nối kiến thức đa chiều, công cụ tính toán kiểm chứng và tài liệu phương pháp luận khoa học.
Công Cụ & Máy Tính Cùng Chuyên Mục
Khám phá các công cụ tính toán và bộ chuyển đổi chuyên sâu chuẩn xác cùng lĩnh vực.
Kiểm Tra Tương Phản Màu
Đo tỷ lệ tương phản màu sắc chữ và nền theo tiêu chuẩn tiếp cận W3C WCAG 2.1.
Đổi Mã Màu RGB Sang HEX
Chuyển đổi các giá trị màu RGB (Đỏ, Lục, Lam) sang mã màu thập lục phân HEX (#RRGGBB) chuẩn thiết kế đồ họa và lập trình web.
Tạo Đổ Bóng CSS Box Shadow
Trình tạo hiệu ứng đổ bóng CSS box-shadow trực quan, hỗ trợ hiệu ứng bóng mờ đa tầng mềm mại, bóng chìm Inset và sao chép mã Tailwind CSS.
Đổi Mã Màu HEX Sang RGBA
Chuyển đổi mã màu thập lục phân HEX (#RRGGBB) sang định dạng CSS rgba(r, g, b, a) với thanh điều chỉnh độ trong suốt linh hoạt.
Tạo Mã QR Code Online
Tạo mã QR Code tùy chỉnh màu sắc, hỗ trợ xuất file ảnh PNG chất lượng cao và vector SVG in ấn không giới hạn thời gian.
Tính Tỷ Lệ Khung Hình
Tính tỷ lệ khung hình hiển thị và co giãn kích thước ảnh/video chuẩn tỷ lệ thuận.
Phương Pháp Luận Khoa Học & Chuẩn Thẩm Định
Dẫn xuất toán học, cơ sở lý thuyết và tiêu chuẩn kỹ thuật điều chỉnh thuật toán này.
RFC 8259 JSON Grammar Specifications, AST Parsing & Auto-Fix Mechanics
Comparative Analysis of Bank Amortization Models & Debt Cash-Flow Optimization
Value-Added Tax (VAT) Calculation Mechanics & Multi-Tier Regime Analysis
Bài Viết Hướng Dẫn & Nghiên Cứu Chuyên Sâu
Cẩm nang hướng dẫn toàn diện, phân tích tình huống thực tế và ứng dụng chuyên sâu.
Chuyển Đổi YAML Sang JSON: Xử Lý Cú Pháp AST, Lỗi Type Coercion và Chuẩn RFC 8259
Hướng dẫn chuyển đổi YAML sang JSON chuẩn RFC 8259, giải mã token AST, khắc phục triệt để lỗi ép kiểu ngầm và chuẩn hóa pipeline CI/CD hạ tầng đám mây.
Tối Ưu Lịch Khấu Hao Nợ: Chiến Lược Niên Kim Cố Định vs Gốc Đều
Bóc tách bản chất lịch khấu hao, bẫy lãi suất dồn đầu kỳ và chiến lược trả nợ trước hạn để tiết kiệm tối đa chi phí vay vốn thực tế.
Làm Chủ Cách Tính VAT: Giá Gross vs Net, Khấu Trừ Thuế Đầu Vào và Tối Ưu Dòng Tiền Doanh Nghiệp
Nắm vững cơ chế thuế VAT: công thức tính ngược Gross sang Net, quy trình khấu trừ thuế đầu vào và chuẩn mực quản trị dòng tiền doanh nghiệp hiệu quả.
Kết quả tính toán được mô phỏng theo các công thức quy chuẩn toán học và khoa học. Vui lòng đối soát với tài liệu kỹ thuật chuyên ngành khi áp dụng vào các dự án chuyên sâu.