เครื่องมือสร้าง Gradient - สร้าง CSS Gradient แบบเห็นภาพ
ออกแบบ gradient แบบ linear และ radial ได้อย่างง่ายดาย เพิ่มจุดสี ปรับองศา ดูตัวอย่างสด และคัดลอก CSS ฟรี
프리셋
Gradient Maker คืออะไร
Gradient maker คือเครื่องมือแก้ไขภาพเพื่อสร้าง CSS gradient แทนที่จะต้องเขียนโค้ด gradient เอง คุณสามารถเลือกสี กำหนดตำแหน่ง และปรับองศา เครื่องมือนี้จะสร้าง CSS แบบเรียลไทม์ รองรับทั้ง linear gradient (พร้อมการควบคุมองศา) และ radial gradient (พร้อมการควบคุมจุดศูนย์กลาง) ทำให้ง่ายต่อการสร้างการเปลี่ยนสีที่ราบรื่นสำหรับพื้นหลัง ปุ่ม และองค์ประกอบ UI
วิธีสร้าง CSS Gradient
- เลือกประเภท — เลือก Linear หรือ Radial gradient
- กำหนดทิศทาง — ปรับองศา (linear) หรือจุดศูนย์กลาง (radial)
- แก้ไขจุดสี — เปลี่ยนสีและลากแถบเลื่อนตำแหน่ง
- เพิ่มจุดสี — คลิก "+ เพิ่มจุดสี" สำหรับ gradient ที่ซับซ้อน (สูงสุด 8 จุด)
- คัดลอก CSS — คลิกปุ่มคัดลอกเพื่อรับโค้ด CSS
ทำไมต้องใช้ Gradient Maker นี้
- Visual Editor — ดู gradient ของคุณอัปเดตแบบเรียลไทม์ขณะที่คุณปรับแต่ง
- Linear & Radial — Gradient ทั้งสองประเภทพร้อมการควบคุมเต็มรูปแบบ
- Multiple Stops — เพิ่มจุดสีได้สูงสุด 8 จุดสำหรับ gradient ที่ซับซ้อน
- Presets — Gradient สำเร็จรูป 8 แบบที่สวยงามให้เริ่มต้น
- One-Click CSS — คัดลอกโค้ด CSS ที่พร้อมใช้งานได้ทันที
FreeToolbox เทียบกับเครื่องมือ Gradient อื่นๆ
| คุณสมบัติ | FreeToolbox | cssgradient.io | WebGradients |
|---|---|---|---|
| แสดงตัวอย่างสด | ใช่ | ใช่ | แสดงภาพนิ่งเท่านั้น |
| จุดสี | สูงสุด 8 จุด | ไม่จำกัด | 2 (คงที่) |
| รองรับ Radial | ใช่ | ใช่ | ไม่ใช่ |
| ค่าที่ตั้งไว้ล่วงหน้า | 8 | ไม่มี | 180 |
| โฆษณา | น้อย | ปานกลาง | น้อย |
คำถามที่พบบ่อย
ความแตกต่างระหว่าง linear และ radial gradient คืออะไร
Linear gradient จะเปลี่ยนสีตามแนวเส้นตรงในมุมที่กำหนด Radial gradient จะเปลี่ยนสีจากจุดศูนย์กลางออกไปด้านนอกในรูปทรงวงกลมหรือวงรี
ฉันสามารถเพิ่มจุดสีได้กี่จุด
สูงสุด 8 จุดสี คุณต้องมีอย่างน้อย 2 จุดเพื่อสร้าง gradient คลิก '+ เพิ่มจุดสี' เพื่อเพิ่มมากขึ้น
ฉันสามารถลบจุดสีได้หรือไม่
ได้ คลิกปุ่ม × ข้างจุดใดก็ได้เพื่อลบออก ตราบใดที่ยังเหลืออย่างน้อย 2 จุด
ฉันจะใช้ค่าที่ตั้งไว้ล่วงหน้าได้อย่างไร
คลิกที่ภาพขนาดย่อที่ตั้งไว้ล่วงหน้าใดก็ได้ที่ด้านล่าง มันจะโหลดสีที่ตั้งไว้ล่วงหน้าและตั้งค่าประเภท gradient เป็น linear ที่ 135 ° จากนั้นคุณสามารถปรับแต่งเพิ่มเติมได้
สิ่งนี้สร้าง CSS ที่เข้ากันได้กับทุกเบราว์เซอร์หรือไม่
CSS ที่สร้างขึ้นใช้ไวยากรณ์ gradient มาตรฐานที่รองรับโดยเบราว์เซอร์สมัยใหม่ทั้งหมด (Chrome, Firefox, Safari, Edge) ไม่จำเป็นต้องมีคำนำหน้าของผู้ขาย