CSS Gradient Generator
สร้างเกรเดียนท์เชิงเส้นหรือรัศมี และส่งออกเป็น CSS, Tailwind หรือ 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.
ตัวควบคุม
Presets
0°90°180°270°360°
ขนาดรูปภาพ
มีประโยชน์สำหรับการจัดแนวขณะแก้ไข รูปภาพที่ส่งออกจะตรงกับสีที่มองเห็นเสมอ
ส่งออก
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]ดูตัวอย่างสด
1920×1080
จุดสี
0%50%100%
Edit Color Stop
วิธีการใช้งาน
- • ลากจุดสีบนเส้นเวลาเพื่อปรับตำแหน่ง
- • คลิกที่จุดเพื่อเลือกและแก้ไขสี
- • เลือกจากจานสีที่ตั้งไว้ล่วงหน้าสำหรับรูปแบบสีที่รวดเร็ว
- • ปรับมุมหรือรูปร่างของไล่ระดับสีในส่วนควบคุม
- • ส่งออกเป็นรูปภาพ PNG หรือคัดลอกโค้ด CSS/Tailwind