Trình tạo độ dốc CSS
Tạo độ dốc tuyến tính hoặc xuyên tâm và xuất dưới dạng CSS, Tailwind hoặc PNG.
Use this CSS gradient generator to build linear or radial gradients with full control over color stops, angle, and sizing. Start from a preset palette or build your own, then copy clean CSS or Tailwind classes for immediate use in design systems. Need static exports? Set the exact output size and download PNGs that match your hero, banner, or background dimensions. The live preview makes it easy to align brand colors, and the export tools keep your workflow fast—no plug‑ins, no uploads, and no login required.
Điều khiển
Presets
0°90°180°270°360°
Kích thước ảnh
Hữu ích để căn chỉnh khi chỉnh sửa. Hình ảnh được xuất luôn khớp với màu sắc hiển thị.
Xuất
Code Preview
.gradient {
background: linear-gradient(90deg, rgba(59, 130, 246, 1) 0%, rgba(139, 92, 246, 1) 50%, rgba(236, 72, 153, 1) 100%);
}bg-gradient-to-b from-[#3b82f6] via-[#8b5cf6] to-[#ec4899]Xem trước trực tiếp
1920×1080
Điểm màu
0%50%100%
Edit Color Stop
Cách sử dụng
- • Kéo các điểm màu trên dòng thời gian để điều chỉnh vị trí
- • Nhấp vào điểm để chọn và chỉnh sửa màu sắc của chúng
- • Chọn từ các bảng màu có sẵn để có các lược đồ màu nhanh chóng
- • Điều chỉnh góc hoặc hình dạng gradient trong Controls
- • Xuất dưới dạng ảnh PNG hoặc sao chép mã CSS/Tailwind