CSS Gradient Builder
Soạn gradient linear và radial CSS một cách trực quan. Chỉnh sửa color stop, sao chép CSS sẵn-dùng.
Tạo bởi JXXR1 · ♥ Tài trợ · ☕ Mời tôi một ly cà phê
Công cụ này để làm gì?
CSS hỗ trợ gradient linear và radial dưới dạng hàm: linear-gradient(to right, red, blue) tạo ra một dải đỏ-sang-xanh từ trái sang phải. Cú pháp linh hoạt — bạn có thể đặt nhiều color stop, kiểm soát góc, và xếp lớp gradient — nhưng dễ gõ sai. Trình xây dựng này cho phép bạn chỉnh sửa color stop một cách trực quan và sao chép CSS hoàn thành.
Khi nào nên dùng
- Tạo background gradient mượt cho hero section hoặc card.
- Tạo "rainbow" hoặc gradient ý nghĩa với nhiều color stop chính xác.
- Thiết kế gradient radial cho hiệu ứng spotlight hoặc background trang trí.
Lưu ý thường gặp
- Color stop có thể chồng lên nhau hoặc nhảy bậc. Hai stop ở cùng vị trí tạo ra một viền cứng — hữu ích để tạo các vùng ranh giới rõ ràng, nhầm lẫn khi bạn không có ý đó.
- Hướng "to right" vs "90deg". Chúng tương đương trong CSS hiện đại. Trình duyệt cũ chỉ chấp nhận "to right".
- Banding với gradient. Gradient từ đen đến xám đậm rất hay hiển thị các dải khi không gian màu 8-bit không đủ chính xác. Thêm một chút noise hoặc dùng OKLCH để giảm thiểu.
- Gradient con không phải là image. Chúng được tính toán mỗi lần render. Một background-image với một file PNG có thể nhanh hơn cho gradient cực kỳ phức tạp.