ออกแบบการไล่ระดับสีที่สวยงามและส่งออกเป็น CSS หรือรูปภาพ
เลือกสี เพิ่มจุดหยุด และปรับมุมหรือจุดกึ่งกลางเพื่อสร้างการไล่ระดับสีที่คุณต้องการ เครื่องมือนี้รองรับการไล่ระดับสีเชิงเส้น รัศมี และทรงกรวย โดยไม่จำกัดสี คัดลอกโค้ด CSS สำหรับสไตล์ชีตของคุณ หรือดาวน์โหลดการไล่ระดับสีเป็น PNG ความละเอียดสูงเพื่อใช้ในโครงการออกแบบ
ใช้เครื่องมือนี้ฟรีคุณสมบัติ
การไล่ระดับสีสามประเภท
สร้างการไล่ระดับสีเชิงเส้นด้วยมุมใดก็ได้ การไล่ระดับสีในแนวรัศมีด้วยจุดศูนย์กลางและรูปร่างที่ปรับได้ หรือการไล่ระดับสีทรงกรวยที่กวาดไปรอบๆ จุด สลับระหว่างประเภทและการอัปเดตตัวอย่างทันที
หยุดสีได้ไม่จำกัด
เพิ่มการหยุดสีได้มากเท่าที่คุณต้องการบนแถบไล่ระดับสี ลากจุดหยุดเพื่อเปลี่ยนตำแหน่ง ดับเบิลคลิกเพื่อเปลี่ยนสี หรือคลิกขวาเพื่อลบ แต่ละจุดรองรับความทึบสำหรับการไล่ระดับสีแบบกึ่งโปร่งใส
เอาต์พุตโค้ด CSS
เครื่องมือนี้สร้างโค้ดภาพพื้นหลัง CSS ที่ถูกต้องพร้อมคำนำหน้าผู้ขาย คัดลอกโค้ดและวางลงในสไตล์ชีตของคุณโดยตรง เอาต์พุตจะอัปเดตแบบเรียลไทม์เมื่อคุณแก้ไขการไล่ระดับสี
ส่งออกรูปภาพ PNG
ดาวน์โหลดการไล่ระดับสีเป็น PNG ที่ความละเอียดใดก็ได้ — ตั้งแต่ภาพขนาดย่อ 100 พิกเซล จนถึงแบนเนอร์ 4000 พิกเซล ใช้รูปภาพเป็นพื้นหลัง ภาพซ้อนทับ หรือองค์ประกอบการออกแบบในเครื่องมือที่ไม่รองรับการไล่ระดับสี CSS
วิธีใช้
เลือกประเภทการไล่ระดับสี
เลือกเชิงเส้น รัศมี หรือทรงกรวย สำหรับเส้นตรง ให้ตั้งค่ามุม สำหรับรัศมี ให้กำหนดจุดกึ่งกลางและรูปร่าง
เพิ่มและปรับสี
คลิกแถบไล่ระดับสีเพื่อเพิ่มการหยุดสี ลากเพื่อเปลี่ยนตำแหน่ง ดับเบิลคลิกเพื่อเปลี่ยนสี และปรับความทึบสำหรับแต่ละจุด
คัดลอก CSS หรือดาวน์โหลด
คัดลอกโค้ด CSS ที่สร้างขึ้นเพื่อใช้บนเว็บ หรือตั้งค่าความละเอียดแล้วดาวน์โหลดการไล่ระดับสีเป็นรูปภาพ PNG
ข้อมูลจำเพาะ
| ประเภทการไล่ระดับสี | เชิงเส้น รัศมี ทรงกรวย |
| สีหยุด | ไม่จำกัด |
| ช่วงมุม | 0–360° |
| เอาต์พุต CSS | คำนำหน้ามาตรฐาน + ผู้ขาย |
| ส่งออก PNG | สูงสุด 4000 × 4000 พิกเซล |
| กำลังประมวลผล | ฝั่งไคลเอ็นต์ (ทันที) |
Related Magic Eraser Tools
คำถามทั่วไป
ฉันสามารถสร้างการไล่ระดับสีแบบโปร่งใสได้หรือไม่
+
ใช่. แต่ละจุดสีจะมีแถบเลื่อนความทึบ ตั้งค่าความทึบต่ำกว่า 100% เพื่อสร้างพื้นที่กึ่งโปร่งใสในการไล่ระดับสี เอาต์พุต CSS ใช้ค่า rgba และการส่งออก PNG จะรักษาช่องอัลฟาไว้
การไล่ระดับสีทรงกรวยคืออะไร?
+
การไล่ระดับสีแบบกรวยจะแผ่กระจายสีไปรอบๆ จุดศูนย์กลาง เช่นเดียวกับการกวาดเข็มนาฬิกา มันมีประโยชน์สำหรับเอฟเฟกต์แบบแผนภูมิวงกลม วงล้อสี และพื้นหลังตกแต่ง การรองรับเบราว์เซอร์นั้นยอดเยี่ยมในเบราว์เซอร์สมัยใหม่
ฉันสามารถใช้ CSS ที่สร้างขึ้นในกรอบงานใดก็ได้หรือไม่
+
ใช่. ผลลัพธ์คือ CSS มาตรฐานที่ทำงานใน HTML ธรรมดา, React, Vue, Tailwind และเฟรมเวิร์กอื่นๆ ที่รองรับ CSS แบบอินไลน์หรือสไตล์ชีต
ต้องการการไล่ระดับสีบนภาพถ่ายหรือไม่?
AI Enhance สามารถปรับโทนสีและแสงของภาพถ่ายของคุณได้ และเครื่องมือวางซ้อนภาพของเราช่วยให้คุณผสมผสานการไล่ระดับสีที่ด้านบนของภาพเพื่อให้ได้รูปลักษณ์ที่สวยงาม
ลองฟรีMore free tools
Explore our other limited free edits after sign-in photo and image tools.
ปรับขนาดรูปภาพให้เป็นขนาดพิกเซลที่แน่นอนสำหรับโซเชียลมีเดีย เว็บ และสิ่งพิมพ์ ไม่จำเป็นต้องลงทะเบียน รองรับ JPEG, PNG และ WebP สูงสุด 50 MB
บีบอัดรูปภาพ JPEG, PNG และ WebP สูงสุดถึง 80 % โดยสูญเสียคุณภาพที่มองเห็นได้น้อยที่สุด ปรับแถบเลื่อนคุณภาพเพื่อการควบคุมเต็มรูปแบบ ไม่จำเป็นต้องลงทะเบียน
แปลงภาพ PNG เป็นรูปแบบ JPEG ได้ทันที ปรับคุณภาพงานพิมพ์ เลือกสีพื้นหลังสำหรับพื้นที่โปร่งใส และดาวน์โหลด — ไม่จำเป็นต้องลงทะเบียน
แปลงภาพ JPEG เป็นรูปแบบ PNG เพื่อการรองรับคุณภาพและความโปร่งใสแบบไม่สูญเสียข้อมูล เหมาะอย่างยิ่งก่อนการลบพื้นหลัง ไม่จำเป็นต้องลงทะเบียนหรือติดตั้ง
แปลงรูปภาพ Apple HEIC และ HEIF เป็นรูปแบบ JPEG ที่เข้ากันได้ในระดับสากล ใช้งานได้ในเบราว์เซอร์ — ไม่ต้องติดตั้งแอป ไม่ต้องสมัคร ไม่ต้องอัพโหลดไฟล์ไปยังเซิร์ฟเวอร์
แปลง JPEG และ PNG เป็น WebP เพื่อให้โหลดหน้าเว็บได้เร็วขึ้น หรือแปลง WebP กลับเป็น JPEG/PNG เพื่อความเข้ากันได้ ไม่ต้องสมัคร ไม่ต้องติดตั้ง ทำงานในเบราว์เซอร์