CSS Gradient Generator (Linear / Radial / Conic)
Visual builder cho CSS linear / radial / conic gradient. 8 preset đẹp, multi-color stop, copy CSS sẵn dùng. Tương thích Tailwind v4.
Color stops
Linear / Radial / Conic gradient — copy CSS sẵn dùng. Hỗ trợ Tailwind v4 và CSS chuẩn. Click + để thêm color stop, kéo slider để chỉnh vị trí.
3 loại CSS gradient
- Linear gradient: chuyển màu theo đường thẳng. Phổ biến nhất — hero section, button, card. Cú pháp:
linear-gradient(135deg, #FF512F, #F09819). - Radial gradient: chuyển màu toả tròn từ tâm. Hay dùng cho spotlight effect, vignette. Cú pháp:
radial-gradient(circle at center, #fff, #000). - Conic gradient: chuyển màu xoay vòng quanh tâm. Tạo color wheel, donut chart. Cú pháp:
conic-gradient(from 0deg, red, yellow, green, blue, red).
Color stops
Mỗi gradient cần ít nhất 2 màu (color stop). Có thể thêm nhiều stop và đặt vị trí % chính xác:
linear-gradient(90deg,
#ff0000 0%, /* đỏ ở đầu */
#ffff00 50%, /* vàng ở giữa */
#00ff00 100% /* xanh ở cuối */
) Tip thiết kế
- Đừng dùng quá 3 màu trong 1 gradient — dễ bị "rainbow vomit" mất chuyên nghiệp.
- Chọn 2 màu cùng nhiệt (đỏ-cam, xanh-tím) trông đẹp hơn 2 màu đối lập.
- Background gradient + text trắng: kiểm tra contrast với Color Contrast Checker — tránh ra vùng AA fail.
- Performance: gradient render trên GPU, rất rẻ — không cần optimize.
Tailwind v4 syntax
Tailwind v4 hỗ trợ gradient phong phú hơn: bg-linear-to-r, bg-radial-[at_50%_50%], bg-conic-180. Tool này tạo CSS thuần — copy paste vào style hoặc dùng utility class tương ứng.
Liên quan
- Box Shadow Generator — đổ bóng cho element
- Color Picker — chọn màu HEX/RGB/HSL
- Color Contrast — check WCAG khi đặt text
- Xem tất cả công cụ
Công cụ liên quan
Xem tất cả công cụ →JWT Decoder
Decode JWT token, xem header/payload/claims với thời gian dễ đọc.
MỚIFormat JSON
Format / minify / validate JSON. Sort key A-Z, custom indent, phím tắt Ctrl+Enter.
MỚIRegex Tester
Test regex realtime với highlight match. 7 mẫu sẵn cho VN (email, SĐT, CCCD, IP...).
MỚIUUID / Hash / Base64 / URL
Bundle 4 dev tool: UUID v4, SHA-256/512 hash, Base64 (URL-safe), URL encode.