ออกแบบการไล่ระดับสีที่สวยงามและส่งออกเป็น CSS หรือรูปภาพ
เลือกสี เพิ่มจุดหยุด และปรับมุมหรือจุดกึ่งกลางเพื่อสร้างการไล่ระดับสีที่คุณต้องการ เครื่องมือนี้รองรับการไล่ระดับสีเชิงเส้น รัศมี และทรงกรวย โดยไม่จำกัดสี คัดลอกโค้ด CSS สำหรับสไตล์ชีตของคุณ หรือดาวน์โหลดการไล่ระดับสีเป็น PNG ความละเอียดสูงเพื่อใช้ในโครงการออกแบบ
ใช้เครื่องมือนี้ฟรีBrowser tool
Gradient generator
Create CSS gradients, preview them live, and export a PNG locally in your browser.
background-image: linear-gradient(90deg, rgba(255, 56, 56, 1) 0%, rgba(124, 58, 237, 1) 100%);Starter palettes
วิธีใช้
เลือกประเภทการไล่ระดับสี
เลือกเชิงเส้น รัศมี หรือทรงกรวย สำหรับเส้นตรง ให้ตั้งค่ามุม สำหรับรัศมี ให้กำหนดจุดกึ่งกลางและรูปร่าง
เพิ่มและปรับสี
คลิกแถบไล่ระดับสีเพื่อเพิ่มการหยุดสี ลากเพื่อเปลี่ยนตำแหน่ง ดับเบิลคลิกเพื่อเปลี่ยนสี และปรับความทึบสำหรับแต่ละจุด
คัดลอก CSS หรือดาวน์โหลด
คัดลอกโค้ด CSS ที่สร้างขึ้นเพื่อใช้บนเว็บ หรือตั้งค่าความละเอียดแล้วดาวน์โหลดการไล่ระดับสีเป็นรูปภาพ PNG
คุณสมบัติ
การไล่ระดับสีสามประเภท
สร้างการไล่ระดับสีเชิงเส้นด้วยมุมใดก็ได้ การไล่ระดับสีในแนวรัศมีด้วยจุดศูนย์กลางและรูปร่างที่ปรับได้ หรือการไล่ระดับสีทรงกรวยที่กวาดไปรอบๆ จุด สลับระหว่างประเภทและการอัปเดตตัวอย่างทันที
หยุดสีได้ไม่จำกัด
เพิ่มการหยุดสีได้มากเท่าที่คุณต้องการบนแถบไล่ระดับสี ลากจุดหยุดเพื่อเปลี่ยนตำแหน่ง ดับเบิลคลิกเพื่อเปลี่ยนสี หรือคลิกขวาเพื่อลบ แต่ละจุดรองรับความทึบสำหรับการไล่ระดับสีแบบกึ่งโปร่งใส
เอาต์พุตโค้ด CSS
เครื่องมือนี้สร้างโค้ดภาพพื้นหลัง CSS ที่ถูกต้องพร้อมคำนำหน้าผู้ขาย คัดลอกโค้ดและวางลงในสไตล์ชีตของคุณโดยตรง เอาต์พุตจะอัปเดตแบบเรียลไทม์เมื่อคุณแก้ไขการไล่ระดับสี
ส่งออกรูปภาพ PNG
ดาวน์โหลดการไล่ระดับสีเป็น PNG ที่ความละเอียดใดก็ได้ — ตั้งแต่ภาพขนาดย่อ 100 พิกเซล จนถึงแบนเนอร์ 4000 พิกเซล ใช้รูปภาพเป็นพื้นหลัง ภาพซ้อนทับ หรือองค์ประกอบการออกแบบในเครื่องมือที่ไม่รองรับการไล่ระดับสี CSS
After this task
After this free tool, open Ai Enhance for the next AI editing workflow.
Continue with Ai Enhanceข้อมูลจำเพาะ
| ประเภทการไล่ระดับสี | เชิงเส้น รัศมี ทรงกรวย |
| สีหยุด | ไม่จำกัด |
| ช่วงมุม | 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.
แปลงสีระหว่างรูปแบบชื่อ HEX, RGB, HSL, HSB, CMYK และ CSS ดูตัวอย่างสด คัดลอกค่าใดก็ได้ และส่งออกการ์ดสี ไม่จำเป็นต้องลงทะเบียน
แปลงรหัสสี HEX เป็นค่า RGB และในทางกลับกัน การแสดงตัวอย่างสด การคัดลอกในคลิกเดียว และเอาต์พุตโค้ด CSS ไม่จำเป็นต้องลงทะเบียน — ใช้งานได้ในเบราว์เซอร์ของคุณ
เลือกสีใดก็ได้จากภาพที่อัปโหลดและรับรหัส HEX, RGB และ HSL ทันที สร้างจานสีจากภาพถ่ายสำหรับการออกแบบเว็บ การสร้างแบรนด์ และภาพประกอบ
อัปโหลดภาพถ่ายและแยกสีเด่น 5-10 สีด้วยรหัส HEX, RGB และ HSL คัดลอกตัวอย่าง ส่งออกเป็นตัวแปร ASE หรือ CSS ไม่จำเป็นต้องลงทะเบียน
สร้างรหัส QR สำหรับ URL ข้อความ ข้อมูลรับรอง WiFi และ vCard ปรับแต่งสี เพิ่มโลโก้ตรงกลาง และดาวน์โหลดเป็น PNG หรือ SVG ไม่จำเป็นต้องลงทะเบียน
คำนวณความกว้าง ความสูง หรืออัตราส่วนภาพของรูปภาพและวิดีโอ ป้อนค่าสองค่าใดก็ได้และรับค่าที่สาม อัตราส่วนที่กำหนดไว้ล่วงหน้าสำหรับโซเชียลมีเดีย ภาพยนตร์ และสิ่งพิมพ์ ไม่จำเป็นต้องลงทะเบียน