ประเด็นสำคัญ
- 01ประเภท CSS gradient ทั้งสาม — เชิงเส้น ตามรัศมี และศูนย์กลาง — ได้รับการสนับสนุนพร้อมตัวแสดงตัวอย่างแบบสด
- 02เพิ่มได้ถึง 6 หยุด สีแต่ละหยุดมีตำแหน่งและสีอิสระ
- 03ผลลัพธ์คือการประกาศ background ที่สมบูรณ์พร้อมที่จะวางลงในชีตสไตล์ใดก็ได้
- 04ไม่มีการลงทะเบียน ไม่มีการติดตั้ง และไม่มีการอัปโหลด — ทุกอย่างทำงานในเบราว์เซอร์ของคุณ
เหตุใดจึงใช้ตัวสร้าง Gradient ด้วยภาพ?
การเขียน CSS gradients ด้วยมือกลายเป็นเรื่องน่าเบื่อเร็ว ไวยากรณ์อ่านได้เมื่อคุณรู้ได้ แต่การเลือกตำแหน่งหยุดและสีที่แน่นอนโดยไม่มีตัวแสดงตัวอย่างด้วยภาพทำให้การตัดสินใจออกแบบง่ายๆ กลายเป็นการลองผิดลองถูกใน DevTools ตัวสร้างให้คุณเห็นผลลัพธ์แบบสดและส่งออกโค้ดสะอาดทันทีที่ดูถูกต้อง
เครื่องมือนี้รองรับ gradient ทั้งสามประเภทสมัยใหม่ Linear คือการผสม directional แบบคลาสสิกที่คุณใช้สำหรับ hero backgrounds และปุ่ม Radial แพร่ออกจากจุด — เหมาะสำหรับเอฟเฟกต์ spot lighting และ vignettes Conic ไหวจากจุดศูนย์กลาง ทำให้เป็นตัวเลือกไปสำหรับส่วน pie chart, color wheels และตัวบ่งชี้ spinner เริ่มต้นจากหนึ่งในพรีเซต (Lime Swiss, Sunset, Sky, Aurora) หรือออกแบบตั้งแต่เริ่มต้น
วิธีสร้าง CSS Gradient
กระบวนการทั้งหมดใช้เวลาน้อยกว่าหนึ่งนาที
- 01
เลือกประเภท gradient
เลือก Linear, Radial หรือ Conic จากตัวเลือกประเภท สำหรับเชิงเส้น ให้ตั้งค่ามุมด้วย ตัวแสดงตัวอย่างจะอัปเดตทันที
- 02
เพิ่มและวางตำแหน่งหยุด
คลิกเพิ่มหยุดเพื่อแทรกหยุด จากนั้นลากเลื่อนหรือพิมพ์เปอร์เซ็นต์เพื่อวางตำแหน่ง รองรับได้ถึง 6 หยุด — หยุดเรียงตามตำแหน่งโดยอัตโนมัติ
- 03
เลือกสีของแต่ละหยุด
คลิกตัวอย่างสีเพื่อเปิดตัวเลือกสีของระบบ หรือพิมพ์ค่า hex โดยตรง รูปแบบ RGB และ hex ทั้งคู่ใช้ได้
- 04
ตัวอย่างแบบสดจริง
แผงตัวแสดงตัวอย่างแสดงผล gradient ของคุณโดยใช้ engine gradient ของเบราว์เซอร์ดั้งเดิม ดังนั้นผลลัพธ์จึงตรงกับสิ่งที่ CSS จะสร้างในการผลิต
- 05
คัดลอกการประกาศ CSS
คลิกคัดลอกเพื่อรับการประกาศ background: linear-gradient(...) แบบสมบูรณ์ วางลงในชีตสไตล์ styled component หรือค่า Tailwind arbitrary เช่น bg-[<value>]
Common Gradient Use Cases
แต่ละประเภท gradient ยอดเยี่ยมในสถานการณ์ที่แตกต่าง
- 01Hero section backgrounds — linear gradient ที่ 135° สำหรับการกวาดแนวทแยงสมัยใหม่
- 02Button hover states — subtle two-stop linear gradient สำหรับความลึก
- 03Radial spotlight หรือ vignette — dark-to-transparent radial บนการวางซ้อน image
- 04Pie charts และ progress rings — conic gradient พร้อม hard stops
- 05Color-wheel selector previews — full-spectrum conic gradient
- 06Text gradients — ใช้ gradient กับ background จากนั้นใช้ background-clip: text
ทำงาน 100% ในเบราว์เซอร์ของคุณ
ตัวสร้าง gradient ทำงาน 100% ฝั่งไคลเอนต์ — ไม่มีข้อมูลส่งไปยังเซิร์ฟเวอร์ใดๆ ตัวแสดงตัวอย่างแสดงผลโดย CSS engine ของเบราว์เซอร์ของคุณ ซึ่งหมายความว่าสิ่งที่คุณเห็นตรงกับสิ่งที่เบราว์เซอร์ของผู้เยี่ยมชมใดๆ จะแสดงผล CSS เดียวกัน
บันทึกเชิงปฏิบัติ: email clients ยังคงมีการรองรับ CSS gradients ที่ไม่แน่นอน หากคุณวาง CSS ที่สร้างขึ้นลงในเทมเพลต HTML email ให้เพิ่ม solid background-color fallback ก่อนการประกาศ gradient เพื่อให้ผู้รับบนไคลเอนต์เก่าเห็นสิ่งที่สมควร
CSS Gradient Generator FAQ
ความแตกต่างระหว่าง linear, radial และ conic gradients คืออะไร?
Linear gradients ทำการ transition ตามเส้นตรงที่มุมที่กำหนด Radial gradients แพร่ออกจากจุดศูนย์กลาง — มีประโยชน์สำหรับไฮไลต์และเอฟเฟกต์แบบ spot Conic gradients ไหวจากจุดศูนย์กลางเช่นเข็มนาฬิกา — เหมาะสำหรับ pie segments และ color wheels
ฉันสามารถใช้สิ่งนี้สำหรับ Tailwind CSS projects ได้หรือไม่?
ใช่ คัดลอกค่าที่สร้างและใช้เป็น Tailwind arbitrary value เช่น bg-[linear-gradient(135deg,#ff6b6b,#4ecdc4)] Tailwind จะรวมไว้ในชีตสไตล์ผลลัพธ์ของคุณ
ตัวแสดงตัวอย่างตรงกับสิ่งที่ฉันจะเห็นในไซต์สดหรือไม่?
ใช่ — ตัวแสดงตัวอย่างแสดงผลโดย gradient engine ของเบราว์เซอร์เดียวกันที่จะแสดงผล CSS แบบสด ดังนั้นผลลัพธ์จึงมีความแม่นยำสูงสุด
ฉันสามารถใช้ CSS gradients ในเทมเพลต email ได้หรือไม่?
ไคลเอนต์ email ส่วนใหญ่ไม่รองรับ CSS gradients อย่างน่าเชื่อถือ เสมอเพิ่ม solid background-color ก่อนการประกาศ gradient ของคุณเป็น fallback
มีข้อจำกัดเกี่ยวกับจำนวนของหยุด หรือไม่?
ตัวสร้างรองรับได้ถึง 6 หยุด สำหรับการออกแบบส่วนใหญ่สอง ถึง สี่ หน่วยอินทิกรัล มากกว่า 6 ตัวมักจะลดความชัดเจนแทนที่จะเพิ่มความรวยรวม