ตัวสร้างไล่สี CSS
ออกแบบไล่สีสวยงามและรับโค้ด CSS พร้อมใช้
ตัวควบคุมไล่สี
ตัวอย่างสด
ผลลัพธ์ CSS
ตัวอย่างการใช้งาน
ไล่สีอุ่น
ไล่สีอุ่นสวยงามที่เปลี่ยนจากส้มพระอาทิตย์ขึ้นไปยังชมพูพระอาทิตย์ตก
ไล่สีมหาสมุทร
ไล่สีเย็นที่ได้แรงบันดาลใจจากมหาสมุทร จากน้ำเงินเข้มไปยังเทอร์ควอยซ์
แสงเรเดียล
ไล่สีเรเดียลที่สร้างเอฟเฟกต์สปอตไลท์หรือแสงจากศูนย์กลาง
คุณสมบัติ
หลายประเภทไล่สี
สร้างไล่สีเชิงเส้น เรเดียล และโคนิก พร้อมควบคุมทิศทางและตำแหน่งอย่างเต็มที่
ตัวอย่างภาพสด
ดูไล่สีอัปเดตแบบเรียลไทม์ขณะปรับสี จุดหยุด มุม และตำแหน่ง
จุดหยุดสีหลายจุด
เพิ่มจุดหยุดสีไม่จำกัดพร้อมควบคุมตำแหน่งสำหรับไล่สีที่ซับซ้อนและสวยงาม
ความเป็นส่วนตัวมาก่อน
ทุกอย่างทำงานในเบราว์เซอร์ของคุณ — ไม่มีข้อมูลถูกส่งไปยังเซิร์ฟเวอร์ใดๆ
วิธีใช้?
เลือกประเภทและสี
เลือกประเภทไล่สี (เชิงเส้น, เรเดียล, โคนิก) และเพิ่มจุดหยุดสีด้วยตัวเลือกสี
ปรับทิศทาง
ใช้ตัวเลื่อนมุมสำหรับไล่สีเชิงเส้นหรือตัวควบคุมตำแหน่งสำหรับประเภทเรเดียลและโคนิก
คัดลอก CSS
คลิกปุ่มคัดลอก CSS เพื่อคัดลอกโค้ดไล่สีที่สร้างขึ้นไปยังคลิปบอร์ด
คำถามที่พบบ่อย
ตัวสร้างไล่สี CSS คืออะไร?
ตัวสร้างไล่สี CSS ช่วยให้คุณออกแบบพื้นหลังไล่สีแบบภาพโดยไม่ต้องจำไวยากรณ์ เลือกประเภท (เชิงเส้น เรเดียล หรือโคนิก) เพิ่มจุดหยุดสี ปรับมุมหรือตำแหน่ง แล้วเครื่องมือจะสร้าง CSS สะอาดพร้อมวางในโปรเจกต์
คุณสมบัติหลัก
ไล่สี CSS ทั้งสามประเภทในเครื่องมือเดียว จุดหยุดสีไม่จำกัดพร้อมลากวาง ตัวเลื่อนมุมสำหรับเชิงเส้นและตัวควบคุมตำแหน่งสำหรับเรเดียลและโคนิก ค่าสำเร็จรูปสวยงามเพื่อเริ่มต้นอย่างรวดเร็ว CSS ที่สร้างมีคำนำหน้า -webkit สำหรับเบราว์เซอร์รุ่นเก่า
กรณีใช้งานทั่วไป
พื้นหลังส่วน Hero สถานะ Hover ของปุ่ม การซ้อนทับการ์ด และขอบตกแต่ง ไล่สีเรเดียลเหมาะสำหรับเอฟเฟกต์ไฟสปอตไลต์ ส่วนโคนิกเหมาะสำหรับวงล้อสีหรือภาพแบบแผนภูมิวงกลม
เคล็ดลับ
ใช้ 2-3 สีเพื่อการออกแบบที่สะอาด สีที่คล้ายกัน (อยู่ใกล้กันบนวงล้อสี) ให้การเปลี่ยนผ่านที่นุ่มนวล สำหรับพื้นหลังที่ละเอียดอ่อน ลองไล่สีระหว่างสองโทนที่ใกล้เคียงกัน ตรวจสอบไล่สีบนพื้นหลังสว่างและมืดเสมอ
ความเป็นส่วนตัว
ทำงานทั้งหมดในเบราว์เซอร์ ไม่มีสี ไม่มีการตั้งค่า ไม่มีอะไรถูกอัปโหลดไปที่ไหน