เครื่องกำเนิดการไล่ระดับสี CSS

สร้างการไล่ระดับสีเชิงเส้น รัศมี และทรงกรวยด้วยการแสดงตัวอย่างสดและ CSS ที่พร้อมทำสำเนา ปรับจุดหยุด มุม และรูปร่าง จากนั้นวางลงในสไตล์ชีตของคุณ

CSS Gradient Generator

Live

Type

Angle135°

Stop 1

Stop 2

Third color stopStop 3

CSS output

background: linear-gradient(135deg, #c026d3 0%, #fb923c 50%, #f43f5e 100%);

Key capabilities

สร้างการไล่ระดับสีเชิงเส้น รัศมี และทรงกรวยด้วยการแสดงตัวอย่างสดและ CSS ที่พร้อมทำสำเนา
ทำงานในเบราว์เซอร์ของคุณ
ใช้งานได้ฟรี

วิธีใช้

เลือกประเภทการไล่ระดับสีและมุมหรือตำแหน่ง
เพิ่มหรือแก้ไขการหยุดสี
คัดลอก CSS ที่สร้างขึ้น

How this tool works

เลือกประเภทการไล่ระดับสีและมุมหรือตำแหน่ง
เพิ่มหรือแก้ไขการหยุดสี
คัดลอก CSS ที่สร้างขึ้น

Recommended settings

ใช้ตัวเลือกเริ่มต้นก่อน จากนั้นจึงปรับเปลี่ยนหากจำเป็น

Supported formats

Text / on-page input

File size and limits

การดูตัวอย่างหลายเลเยอร์ที่ซับซ้อนมากอาจรู้สึกช้าลงในโทรศัพท์รุ่นเก่า

Privacy

ตัวสร้างสีและ CSS ทำงานทั้งหมดในเบราว์เซอร์ของคุณ การดูตัวอย่างและการแปลงไม่เคยอัปโหลดสไตล์ของคุณ

Common use cases

ใช้ CSS Gradient Generator ทุกครั้งที่คุณต้องการ: สร้างการไล่ระดับสีเชิงเส้น รัศมี และทรงกรวยพร้อมการแสดงตัวอย่างสดและ CSS ที่พร้อมทำสำเนา

Troubleshooting

การแสดงตัวอย่างดูแตกต่างออกไปหลังจากวาง

ตรวจสอบ CSS ที่แข่งขันกันบนเพจของคุณ (รีเซ็ต, สีที่สืบทอดมา) คัดลอกกฎที่สร้างขึ้นลงในสไตล์ชีตแบบแยกก่อน

คำถามที่พบบ่อย

สิ่งนี้อัปโหลด CSS ของฉันหรือไม่

ไม่ ตัวสร้างและตัวแปลงทำงานในเบราว์เซอร์ของคุณพร้อมการแสดงตัวอย่างแบบสด

ฉันจำเป็นต้องมีบัญชีหรือไม่?

ไม่ เปิดเครื่องมือ ปรับแต่งการควบคุม และคัดลอก CSS