0%
100%
background: linear-gradient(135deg, #7c3aed 0%, #06b6d4 100%);

📐 Hướng dẫn công cụ tạo gradient CSS

Công cụ tạo gradient CSS của EVEDAYS là công cụ gradient trực quan, miễn phí dành cho nhà thiết kế web và lập trình viên front-end. Phối màu theo thời gian thực để tạo ngay mã gradient CSS đẹp mắt và sao chép. Các kiểu gradient được hỗ trợ: • Tuyến tính (Linear): kiểu gradient phổ biến nhất, nối hai điểm theo đường thẳng. Có thể đặt góc tùy ý từ 0° đến 360°. • Tỏa tròn (Radial): gradient hình tròn lan từ tâm ra ngoài. Rất hợp để tạo chiều sâu cho nút bấm và nền thẻ. • Hình nón (Conic): gradient có màu thay đổi khi xoay quanh một điểm tâm. Dùng để tạo biểu đồ tròn và bánh xe màu. Tính năng chính: • Nhiều điểm màu: thêm từ hai màu trở lên để tạo gradient phức tạp. • Điều chỉnh vị trí: tinh chỉnh vị trí (%) của từng điểm màu bằng thanh trượt. • Mẫu có sẵn: áp dụng các phối màu gradient phổ biến chỉ với một cú nhấp. • Ngẫu nhiên: tạo phối màu ngẫu nhiên khi bạn cần ý tưởng. • Xem trước trực tiếp: mọi thay đổi hiển thị ngay trong khung xem trước.

🎨 Mẹo sử dụng

• Phần hero của website: dùng gradient tuyến tính làm nền tạo ấn tượng đầu tiên hiện đại, tinh tế. • Hiệu ứng hover cho nút: áp dụng gradient khác nhau cho trạng thái mặc định và hover tạo cảm giác tương tác. • Gradient cho chữ: kết hợp với background-clip: text, bạn có thể áp gradient lên chữ. • Viền thẻ: áp gradient vào border-image để tạo viền sang trọng. • Hiệu ứng tải: áp animation lên gradient hình nón để tạo biểu tượng tải xoay tròn.

💡 Câu hỏi thường gặp

H. Gradient có hoạt động trên trình duyệt cũ không? Đ. linear-gradient và radial-gradient được hỗ trợ trên mọi trình duyệt hiện đại, kể cả IE10+. conic-gradient được hỗ trợ trên Chrome 69+, Firefox 83+ và Safari 12.1+. H. Tôi có thể thêm tối đa bao nhiêu điểm màu? Đ. Không có giới hạn kỹ thuật, nhưng nên dùng 2–5 điểm để dễ đọc và đảm bảo hiệu năng. H. Tôi có thể dùng mã đã tạo cho mục đích thương mại không? Đ. Hoàn toàn được. Mã gradient CSS không thuộc đối tượng bản quyền nên bạn có thể dùng thoải mái.