CSS Gradient Generator (Linear / Radial / Conic)

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ụ