ตัวสร้าง CSS gradient
ออกแบบไล่สีพื้นหลัง CSS โดยไม่ต้องจำไวยากรณ์ สลับระหว่างประเภทเชิงเส้นและรัศมี ตั้งมุมสำหรับไล่สีเชิงเส้น (องศา) และเลือกจุดหยุดสีสองจุดที่ 0% และ 100%
วิธีสร้างไล่สี
1. เลือกไล่สีเชิงเส้นหรือรัศมี
2. สำหรับเชิงเส้น ตั้งมุมเป็นองศา (0 = ล่างขึ้นบน, 90 = ซ้ายไปขวา)
3. ใส่สีเริ่มต้นและสิ้นสุด (HEX)
4. คัดลอก CSS จากบัตรผลลัพธ์เข้าโปรเจกต์ของคุณ
ตัวอย่างไล่สี
แบนเนอร์ฮีโร่เชิงเส้น (135deg)
เขียวอมฟ้า #6F9B96 ถึงพีช #E8C4B8 ที่ 135° — แนวทแยงที่พบบ่อยในส่วนหัวหน้าแลนดิ้ง ใช้เป็นพื้นหลังของส่วนความกว้างเต็ม
สปอตไลต์รัศมี
ประเภทรัศมีพร้อมศูนย์กลางสว่างและขอบมืด — จำลองวินเยตต์: radial-gradient(circle, #fff 0%, #333 100%)
เฟดแนวตั้ง (180deg)
มุม 180 สำหรับเฟดบนลงล่างจากสีแบรนด์เป็นขาว — มีประโยชน์ด้านหลังแถบนำทาง
เมื่อไหร่ควรใช้เครื่องมือนี้
• เมื่อต้นแบบพื้นหลัง UI และต้องการผลตอบรับภาพทันที
• เมื่อลืมว่ามุม 90deg วิ่งซ้าย-ขวาหรือบน-ล่าง
• เมื่อต้องการ CSS คัดลอกวางสำหรับ CodePen ค่ากำหนดเองของ Tailwind หรือการส่งมอบดีไซน์
จุดหยุดสีโดยละเอียด
จุดหยุดคือสีบวกตำแหน่งเพิ่มเติม: #ff0000 0%, #0000ff 50%, #00ff00 100% เบราว์เซอร์ประมาณ RGB ระหว่างจุดหยุด จุดกลางสร้างพระอาทิตย์ตกเป็นแถบหรือลายหลายแบรนด์ เริ่มด้วยสองจุดที่นี่ แล้ววางและต่อจุดที่สามใน devtools จนดูถูก
คำถามที่พบบ่อย
ไวยากรณ์ CSS ของไล่สีเชิงเส้นคืออะไร?
background: linear-gradient(angle, color1 0%, color2 100%); มุมเป็นองศา สีเป็นจุดหยุดตามเส้น
จุดหยุดสีทำงานอย่างไร?
จุดหยุดทำเครื่องหมายว่าแต่ละสีอยู่ตรงไหนบนเส้นไล่สี 0% คือจุดเริ่ม 100% คือจุดจบ เครื่องมือนี้ล็อกสองจุด เพิ่มในตัวแก้ไขหากจำเป็น
เชิงเส้นกับรัศมี?
เชิงเส้นผสมตามเส้นตรง รัศมีผสมออกจากจุดศูนย์กลาง — ดีสำหรับวงกลมและจุดนุ่ม
ค่ามุมใดพบบ่อย?
0deg ขึ้น 90deg ไปขวา 180deg ลง 135deg ทแยง — พบบ่อยสำหรับการ์ดและฮีโร่
ตั้ง background หรือ background-image?
เอาต์พุตใช้ชวเลข background ที่เหมาะกับ div ส่วนใหญ่ คุณแยกเป็น background-image ได้หากทับเลเยอร์อื่น