Gradient Generator

แนวคิดหลัก

เกรเดียนต์ CSS เป็นภาพพื้นหลัง ไม่ใช่ background-color ทึบ เกรเดียนต์เชิงเส้นตามมุมหรือคำสำคัญเช่น to right แนวรัศมีแผ่จากศูนย์กลาง แต่ละสต็อปเพิ่มสีตามเส้นทางนั้น เครื่องมือสร้างประกาศ background เดียวให้วางในสไตล์ชีต ไม่สร้างกฎโฮเวอร์ แอนิเมชัน หรือคำนำหน้าผู้ผลิต

สต็อปแข็ง (สองสีที่เปอร์เซ็นต์เดียวกัน) ดูเหมือนลายทาง การผสมนุ่มใช้เปอร์เซ็นต์ต่างกัน Hex และ RGB จากตัวเลือกใช้ได้เหมือนกัน การสร้างทำงานในเบราว์เซอร์เท่านั้น หากต้องการความโปร่งใส ให้แก้ CSS ที่คัดลอกเป็น rgba/hsla — ตัวเลือกมักเป็น hex ทึบ

ตัวอย่าง

เกรเดียนต์เชิงเส้นจาก #4f46e5 ถึง #06b6d4 ไปมุมล่างขวาเป็นพื้นหลังฮีโร่ที่พบบ่อย เพิ่มสต็อปกลางที่ 50% สำหรับการผสมสามสี คัดลอกค่าหลัง background: แล้วใช้ตามนั้น ส่วนฮีโรมักดูดีใกล้ 135deg ทับภาพ ปุ่มมักใช้ 180deg (สว่างกว่าเล็กน้อยด้านบน) เมื่อลองอินพุตเดิม ให้รีเซ็ตก่อนเพื่อไม่ให้ผลลัพธ์เก่าปน ในคอมพิวเตอร์ที่ใช้ร่วมกัน ให้ล้างช่องเมื่อเสร็จ ปิดแท็บแล้วข้อความที่วางจะหาย ไม่ต้องส่งคำขอลบไปเซิร์ฟเวอร์ ชื่อปุ่มตรงกับเครื่องมือด้านบนหน้า หากผลว่าง ให้ตรวจช่องที่ต้องกรอกและข้อผิดพลาดที่ซ่อนอยู่

ที่เกี่ยวข้อง: เครื่องมือสร้าง box shadow · ตัวเลือกสี