CSS Gradient Generator
Create CSS gradients with preview
135°
จุดสี
#3B82F60%
#8B5CF6100%
ผลลัพธ์ CSS
background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
เกี่ยวกับเครื่องมือนี้
CSS Gradient Generator สร้างกราดิเอนต์หลายสีที่นุ่มนวลซึ่งคุณสามารถวางลงใน CSS ได้โดยตรง รองรับกราดิเอนต์เชิงเส้น (ตามทิศทาง) และแบบรัศมี (วงกลม) พร้อมจุดสีได้ไม่จำกัด
จุดสีกำหนดตำแหน่งเริ่มต้นและสิ้นสุดของแต่ละสีตลอดแกนกราดิเอนต์ แถบเลื่อนมุมหมุนกราดิเอนต์เชิงเส้นตั้งแต่ 0° ถึง 360°
วิธีใช้งาน
- เลือกประเภทกราดิเอนต์: เชิงเส้นหรือแบบรัศมี
- สำหรับกราดิเอนต์เชิงเส้น ลากแถบเลื่อนมุมเพื่อกำหนดทิศทาง
- คลิกตัวอย่างสีเพื่อเปลี่ยนสี และลากแถบเลื่อนเพื่อปรับตำแหน่ง
- คลิก + เพิ่มจุด เพื่อเพิ่มจุดสี คลิก ✕ เพื่อลบ
- คลิกคัดลอกเพื่อคัดลอกการประกาศ CSS background
กรณีการใช้งาน
นักออกแบบเว็บใช้ CSS gradient แทนรูปภาพสำหรับพื้นหลังส่วน hero ทีมแบรนด์สร้างชุดสีกราดิเอนต์ที่ตรงกับแนวทางสีขององค์กร นักพัฒนาสร้างต้นแบบการ์ด ปุ่ม และ overlay
คำถามที่พบบ่อย
- ความแตกต่างระหว่างกราดิเอนต์เชิงเส้นและแบบรัศมีคืออะไร? — กราดิเอนต์เชิงเส้นเปลี่ยนสีตามเส้นตรงในมุมที่กำหนด กราดิเอนต์แบบรัศมีแผ่สีออกจากจุดศูนย์กลาง
- ใช้สีมากกว่าสองสีได้ไหม? — ได้ คลิก + เพิ่มจุด เพื่อเพิ่มจุดสีได้ตามต้องการ
- CSS ที่สร้างขึ้นเข้ากันได้กับทุกเบราว์เซอร์หรือไม่? — ใช่ ฟังก์ชัน linear-gradient() และ radial-gradient() รองรับเต็มรูปแบบในทุกเบราว์เซอร์สมัยใหม่โดยไม่ต้องใช้ vendor prefix