ตัวสร้างกราเดียนต์ CSS ให้คุณออกแบบกราเดียนต์แบบเส้นตรง รัศมี และกรวยแบบเรียลไทม์ — ปรับจุดสี มุม และตำแหน่ง แล้วคัดลอก CSS ที่พร้อมใช้
คุณสมบัติ
- กราเดียนต์ 3 ประเภท: เส้นตรง (มีทิศทาง) รัศมี (จากกึ่งกลางออกด้านนอก) และกรวย (หมุน — เหมาะกับแผนภูมิวงกลมและวงล้อสี)
- ควบคุมมุม: ตั้ง 0–360° สำหรับประเภทเส้นตรงและกรวยด้วยแถบเลื่อนหรือการกรอกตัวเลขที่แม่นยำ ปุ่มหมุนเพิ่มทีละ 45° ทุกครั้งที่คลิก
- จุดสี: แต่ละจุดมีตัวเลือกสีและแถบเลื่อนตำแหน่ง (0–100%) อิสระ อย่างน้อย 2 จุด — เพิ่มได้มากเท่าที่ต้องการ
- 10 ค่าที่ตั้งไว้ที่คัดสรรแล้ว รวม Sunset, Ocean, Aurora และ Conic Pride — คลิกเพื่อโหลดค่าที่ตั้งไว้เป็นจุดเริ่มต้น
- ตัวอย่างสดขนาดใหญ่: แผงตัวอย่าง 192px และแถบกราเดียนต์บางอัปเดตทันทีขณะแก้ไข
- คัดลอก CSS ในคลิกเดียว: รับ CSS ครบถ้วน background: gradient(...); พร้อมวางในสไตล์ชีตหรือแอตทริบิวต์ style ใดก็ได้
วิธีใช้
- เลือกประเภทกราเดียนต์ ตั้งจุดสีและมุม หรือเริ่มจากค่าที่ตั้งไว้
- ตรวจดูตัวอย่างและเพิ่มหรือลบจุดสีตามต้องการ
- คัดลอก CSS ที่สร้างขึ้น
