เครื่องมือสร้าง Gradient
สร้าง CSS gradient แบบมองเห็นได้ทันที และคัดลอกโค้ด linear-gradient สำหรับพื้นหลัง ปุ่ม และองค์ประกอบ UI
เจตนาการค้นหา
สร้าง CSS gradient สำหรับ UI และหน้า Landing
สร้างโค้ด gradient CSS สำหรับพื้นหลัง ปุ่ม หรือโซนต่าง ๆ แล้วคัดลอกไปวางใน stylesheet ได้ทันที
ใช้ตัวสร้างเพื่อปรับแบบ linear/radial, จุดหยุดสี, มุม และทิศทาง แล้วเปรียบเทียบผลลัพธ์ในตัวอย่างจริงก่อนส่งออก
คัดลอกค่าที่สร้างเป็น `linear-gradient(...)` หรือ `radial-gradient(...)` แล้วนำไปวางใน `background` หรือ `background-image` ทันที
กรณีการใช้งานทั่วไป
หน้า landing, ไฮไลต์การ์ด, พื้นหลังปุ่ม, แบนเนอร์ และส่วนของแบรนด์ที่ต้องการช่วงการเปลี่ยนสีควบคุมได้
ผสมสีและมุม
ปรับสมดุลสีแบรนด์กับจุดหยุดสีและทิศทางเช่น `to right`, `90deg`, `to bottom right` เพื่อคงความอ่านง่ายและโทนที่เหมาะสม
ตรวจสอบหลังวาง
หลังวางแล้วให้ตรวจสอบ contrast ข้อความ, ความสม่ำเสมอของสีแบรนด์ และการแสดงผลในเบราว์เซอร์หลัก (Chrome/Firefox/Safari)
เครื่องมือนี้เน้นการสร้างและคัดลอก CSS อย่างรวดเร็ว ให้ยืนยันค่า contrast และการแสดงผลข้ามเบราว์เซอร์หลังนำไปใช้จริง
เครื่องมือสร้าง Gradient พื้นที่ทำงานเครื่องมือสร้าง gradient
วิธีใช้
- 1 เลือก gradient แบบ linear หรือ radial แล้วปรับมุม
- 2 เพิ่มจุดหยุดสีหรือเปลี่ยนสีและตำแหน่งพร้อมดูตัวอย่าง
- 3 คัดลอกโค้ด CSS gradient ที่สร้างแล้วไปใช้ใน stylesheet
กรณีใช้งานทั่วไป
- สร้าง CSS linear gradient
- สร้าง gradient สำหรับพื้นหลัง CSS
- ปรับตำแหน่งจุดหยุดสี
คำถามที่พบบ่อย
สร้าง gradient แบบใดได้บ้าง?
คุณสามารถสร้างค่า linear-gradient และ radial-gradient ได้ โดย linear gradient สามารถปรับมุมได้
เพิ่มหรือแก้ไขจุดหยุดสีได้ไหม?
ได้ ปรับสีและตำแหน่ง จากนั้นเพิ่มหรือลบจุดหยุดสีเพื่ออัปเดตตัวอย่างและ CSS ทันที
ใช้ CSS ที่สร้างขึ้นอย่างไร?
ผลลัพธ์จะแสดงเป็นพร็อพเพอร์ตี background และปุ่มคัดลอกช่วยให้คุณนำไปวางใน stylesheet ได้