เครื่องมือสร้างเกรเดียนต์ CSS
สร้างเกรเดียนต์ CSS แบบเชิงเส้นหรือแบบรัศมีด้วยภาพ แล้วคัดลอกโค้ด CSS ที่พร้อมใช้งานได้ทันทีในเบราว์เซอร์ของคุณ
🔒 ประมวลผลในเบราว์เซอร์ของคุณ
Loading…
วิธีใช้งาน
- เลือก เชิงเส้น หรือ รัศมี เป็นประเภทเกรเดียนต์ สำหรับเกรเดียนต์เชิงเส้น ให้ลากแถบเลื่อนหรือพิมพ์ค่าเพื่อกำหนดมุมเป็นองศา
- จุดสีแต่ละจุดจะมีตัวอย่างสีและตำแหน่ง (0-100%) คลิกที่ตัวอย่างสีเพื่อเลือกสี หรือพิมพ์ตำแหน่งเพื่อย้ายจุดนั้นไปตามเกรเดียนต์
- ใช้ "เพิ่มจุดสี" เพื่อเพิ่มจุดสีได้สูงสุด 5 จุด หรือคลิก "ลบ" ข้างจุดสีใดจุดหนึ่งเพื่อลบออก (ต้องมีอย่างน้อย 2 จุดสี)
- กล่องตัวอย่างเหนือผลลัพธ์ CSS จะอัปเดตทันทีเมื่อคุณปรับตัวควบคุมใดๆ โดยไม่ต้องกดปุ่มใดๆ
- คลิก คัดลอก เพื่อคัดลอกคำประกาศ CSS ที่สร้างขึ้น พร้อมนำไปวางในสไตล์ชีตของคุณ
คุณสมบัติ
- รองรับทั้งเกรเดียนต์เชิงเส้น (ปรับมุมได้) และแบบรัศมี
- รองรับจุดสีได้สูงสุด 5 จุด แต่ละจุดมีสีและตำแหน่งของตัวเอง
- กล่องตัวอย่างแบบเรียลไทม์ที่อัปเดตทันทีเมื่อมีการแก้ไขตัวควบคุมใดๆ
- คัดลอกคำประกาศ CSS ที่พร้อมวางได้ในคลิกเดียว
- ทำงานฝั่งไคลเอนต์ทั้งหมด — เกรเดียนต์ของคุณไม่มีวันออกจากเบราว์เซอร์
คำถามที่พบบ่อย
เครื่องมือนี้ส่งเกรเดียนต์ของฉันไปที่ไหนหรือไม่?
ไม่ การสร้างและแสดงตัวอย่างเกรเดียนต์ทั้งหมดทำด้วย JavaScript และ CSS ในเครื่องเท่านั้น ไม่มีการอัปโหลดหรือส่งข้อมูลไปยังเซิร์ฟเวอร์แต่อย่างใด
ฉันสามารถเพิ่มจุดสีได้กี่จุด?
สูงสุด 5 จุด เนื่องจากเกรเดียนต์ต้องมีอย่างน้อย 2 จุดสีจึงจะมีความหมาย ปุ่มลบจะถูกปิดใช้งานเมื่อเหลือ 2 จุด
การตั้งค่ามุมมีผลกับเกรเดียนต์แบบรัศมีหรือไม่?
ไม่มีผล เกรเดียนต์แบบรัศมีในเครื่องมือนี้จะแผ่ออกจากจุดศูนย์กลางเป็นวงกลมเสมอ ดังนั้นการตั้งค่ามุมจะใช้ได้กับเกรเดียนต์เชิงเส้นเท่านั้น
ถ้าจุดสีสองจุดมีตำแหน่งเดียวกันจะเกิดอะไรขึ้น?
สามารถทำได้ และสามารถใช้เพื่อสร้างขอบสีที่ชัดเจนแทนการไล่สีแบบนุ่มนวลได้โดยตั้งใจ — จุดสีทั้งสองจะยังคงอยู่ใน CSS ที่สร้างขึ้น
ฉันสามารถวางผลลัพธ์ลงในไฟล์ CSS ของฉันได้โดยตรงหรือไม่?
ได้ กล่องผลลัพธ์จะแสดงคำประกาศ `background: ...;` แบบสมบูรณ์ที่คุณสามารถวางลงในสไตล์ชีตหรืออินไลน์สไตล์ได้ทันที