เครื่องมือสร้าง CSS Gradient
สร้าง CSS gradient แบบเชิงเส้นและแบบรัศมีด้วยตัวแก้ไขแบบภาพ เพิ่มจุดสีหลายจุดและปรับแต่งมุม เครื่องมือสร้าง gradient ฟรี
Loading tool...
เครื่องมือสร้าง CSS Gradient คืออะไร?
CSS gradient generator สร้าง linear, radial และ conic gradients ผ่านอินเทอร์เฟซแบบภาพที่ใช้งานง่าย ตั้ง color stops, มุม และตำแหน่งเพื่อสร้าง CSS code สำหรับการเปลี่ยนสีที่ราบรื่นใน backgrounds และ overlays
ประโยชน์หลัก
- หลายประเภท gradient
- ควบคุม color stops
- ปรับมุม
- คัดลอก CSS ทันที
กรณีการใช้งาน
- •ออกแบบ background
- •สไตล์ปุ่ม
- •hero sections
- •เอฟเฟกต์ overlay
วิธีสร้าง CSS Gradients
- เลือกประเภท gradient: เลือกสไตล์ linear, radial หรือ conic gradient
- เพิ่ม color stops: คลิกเพื่อเพิ่มสีและปรับตำแหน่ง
- ตั้งทิศทาง: สำหรับ linear gradients ตั้งมุมหรือทิศทาง
- คัดลอก CSS code: คัดลอก CSS gradient property ที่สร้างขึ้นสำหรับ styles ของคุณ
คุณสมบัติหลัก
- สร้าง linear และ radial gradients
- หลาย color stops
- ควบคุมมุมและตำแหน่ง
- คลัง gradient presets
- ดูตัวอย่างสด
- คัดลอก CSS gradient
คำถามที่พบบ่อย
สร้าง gradients ประเภทอะไรได้บ้าง?
สร้าง linear, radial และ conic gradients Linear ไหลเป็นเส้นตรง, radial แผ่จากศูนย์กลาง, conic หมุนรอบจุดเหมือนแผนภูมิวงกลม
เพิ่ม color stops หลายตัวได้อย่างไร?
คลิกเพื่อเพิ่ม color stops ที่ตำแหน่งใดก็ได้ แต่ละ stop กำหนดสีและตำแหน่ง (0-100%) stops มากขึ้นสร้างการเปลี่ยนแปลงที่ราบรื่นหรือซับซ้อนกว่า
มุม gradient คืออะไร?
มุม (0-360°) กำหนดทิศทางของ linear gradients 0° ขึ้นบน 90° ไปขวา 180° ลงล่าง คีย์เวิร์ดเช่น "to right" ก็ใช้ได้เช่นกัน
ใช้ความโปร่งใสใน gradients ได้ไหม?
ได้ ใช้สี RGBA หรือ HSLA พร้อมค่า alpha Gradients โปร่งใสสร้างเอฟเฟกต์ overlay และ fade
คู่มือฉบับละเอียด
คู่มือฉบับสมบูรณ์ Gradient Generator: สร้าง CSS Gradient สวยงาม
อ่านคู่มือฉบับเต็ม →
อยู่ในชุดเครื่องมือ:ชุดเครื่องมือสำหรับนักออกแบบ UI/UX