เครื่องมือสร้าง CSS Gradient
สร้างสรรค์ gradient แบบ Linear และ Radial ที่น่าทึ่งด้วยภาพ เพิ่มตัวเลือกสี, ปรับมุม, เลือกจากค่าที่ตั้งไว้ล่วงหน้า และคัดลอกโค้ด CSS ได้ทันที
เครื่องมือสร้าง CSS Gradient คืออะไร
เครื่องมือสร้าง CSS gradient ช่วยให้คุณสร้างการเปลี่ยนสีที่ราบรื่นสำหรับพื้นหลังเว็บไซต์ได้แบบเห็นภาพ แทนที่จะเขียนไวยากรณ์ gradient ด้วยตนเอง คุณสามารถเลือกสี ปรับตำแหน่งหยุดสีและมุม และรับโค้ด CSS ที่พร้อมใช้งานได้ทันที รองรับทั้ง linear gradient (แบบทิศทาง) และ radial gradient (แบบวงกลม)
วิธีสร้าง CSS Gradient
- เลือกประเภท — เลือกโหมด Linear หรือ Radial
- เพิ่มสี — ใช้ตัวเลือกสีเพื่อกำหนดจุด gradient
- ปรับตำแหน่ง — ลากแถบเลื่อนเพื่อควบคุมตำแหน่งของแต่ละสี
- ตั้งค่ามุม — สำหรับ linear gradient ให้ปรับมุมทิศทาง
- คัดลอก CSS — คลิกปุ่มคัดลอกเพื่อรับโค้ด CSS
ทำไมต้องใช้เครื่องมือสร้าง CSS Gradient นี้
- Visual Editor — ดู gradient ของคุณอัปเดตแบบเรียลไทม์ขณะที่คุณปรับสี
- Multiple Stops — เพิ่มตัวเลือกสีได้สูงสุด 8 สีสำหรับ gradient ที่ซับซ้อน
- Preset Gallery — เริ่มต้นด้วย gradient ที่สร้างไว้ล่วงหน้าที่สวยงามและปรับแต่ง
- Clean CSS — รับ CSS ที่พร้อมคัดลอกและวางด้วยไวยากรณ์ที่ถูกต้อง
- No Sign-up — ฟรีและทำงานได้ทั้งหมดในเบราว์เซอร์ของคุณ
FreeToolbox กับเครื่องมือสร้าง Gradient อื่นๆ
| คุณสมบัติ | FreeToolbox | cssgradient.io | WebGradients |
|---|---|---|---|
| Linear + Radial | ใช่ | ใช่ | Linear เท่านั้น |
| Multiple stops | สูงสุด 8 | ไม่จำกัด | 2 เท่านั้น |
| Presets | 6 | ไม่มี | 180 |
| โฆษณา | น้อยมาก | เยอะ | ปานกลาง |
| Dark UI | ใช่ | ไม่มี | ไม่มี |
คำถามที่พบบ่อย
ฉันสามารถสร้าง radial gradient ได้หรือไม่
ได้ คุณสามารถสลับระหว่างโหมด Linear และ Radial ที่ด้านบน โหมด Radial จะสร้าง gradient แบบวงกลมจากกึ่งกลางออกไปด้านนอก
ฉันสามารถเพิ่มตัวเลือกสีได้กี่สี
คุณสามารถเพิ่มตัวเลือกสีได้สูงสุด 8 สี แต่ละสีมีตัวเลือกสีและแถบเลื่อนตำแหน่งของตัวเอง
มันสร้าง vendor prefixes หรือไม่
เบราว์เซอร์สมัยใหม่ทั้งหมดรองรับไวยากรณ์มาตรฐาน โค้ดที่สร้างขึ้นใช้ไวยากรณ์ `linear-gradient` / `radial-gradient` มาตรฐานซึ่งใช้งานได้ในเบราว์เซอร์ปัจจุบันทั้งหมด
ฉันสามารถบันทึก gradient ของฉันได้หรือไม่
คัดลอกโค้ด CSS และบันทึกลงในโปรเจ็กต์ของคุณ เครื่องมือนี้ทำงานในเบราว์เซอร์และไม่ได้จัดเก็บข้อมูลบนเซิร์ฟเวอร์
เครื่องมือนี้ฟรีหรือไม่
ใช่ ฟรีทั้งหมดโดยไม่มีการลงทะเบียนหรือข้อจำกัดในการใช้งาน