สร้าง CSS Gradient
ออกแบบสีไล่ระดับแบบ linear หรือ radial แบบเห็นภาพ แล้วคัดลอกโค้ด CSS ไปใช้ได้เลย
background: linear-gradient(90deg, #0ea5e9 0%, #0369a1 100%);
เกี่ยวกับเครื่องมือนี้
สร้าง CSS Gradient เป็นเครื่องมือฟรีสำหรับออกแบบสีไล่ระดับแบบเห็นภาพ แล้วได้โค้ด CSS พร้อมใช้ทันที แทนที่จะต้องนั่งเดาค่าสีและมุมในหัว เครื่องมือนี้ให้คุณเลือกสีและปรับทิศทางบนหน้าจอ พร้อมแสดงตัวอย่างผลลัพธ์แบบเรียลไทม์ เห็นทันทีว่าไล่สี cssออกมาสวยอย่างที่คิดหรือยัง
ความสามารถหลักครอบคลุมงานออกแบบพื้นหลังทั่วไป:
- เลือกได้ทั้งแบบเส้นตรง (linear-gradient) และแบบรัศมี (radial-gradient)
- เพิ่มจุดสี (color stop) ได้หลายจุด เพื่อไล่สีผ่านหลายเฉดในแถบเดียว
- ปรับมุมหรือทิศทางการไล่สี เช่น บนลงล่าง ซ้ายไปขวา หรือทแยงมุม
- ดูตัวอย่างสดทุกครั้งที่ปรับค่า ไม่ต้องรีเฟรชหรือเดา
จุดที่ทำให้ทำงานเร็วขึ้นคือ เมื่อพอใจกับผลลัพธ์แล้วเพียงกดคัดลอก เครื่องมือจะให้โค้ด CSS มาตรฐานที่นำไปวางในคุณสมบัติ background ของสไตล์ชีตได้เลย ใช้ได้กับทุกเบราว์เซอร์สมัยใหม่ ไม่ต้องแก้เพิ่ม เหมาะทั้งกับนักพัฒนาที่อยากได้ค่าเป๊ะ ๆ เร็ว ๆ และนักออกแบบที่อยากลองเล่นสีให้ลงตัวก่อนส่งงาน
ดีที่สุดคือไม่ต้องเขียน CSS เป็นก็ใช้ได้ เลือกสีและลากปรับแบบเห็นภาพ แล้วปล่อยให้เครื่องมือเขียนโค้ดให้ ใช้ฟรี ไม่ต้องสมัครสมาชิก ไม่ต้องติดตั้งอะไร เปิดใช้ได้ทันทีในเบราว์เซอร์ทุกอุปกรณ์
วิธีใช้งาน
- 1เลือกสีเริ่มต้นและสีปลายทาง หรือเพิ่มจุดสี (color stop) ได้หลายจุดตามต้องการ
- 2ปรับชนิดและทิศทางของการไล่สี เช่น แบบเส้นตรง (linear) หรือแบบรัศมี (radial)
- 3ดูตัวอย่างผลลัพธ์แบบเรียลไทม์บนหน้าจอ
- 4กดคัดลอกโค้ด CSS แล้วนำไปวางในสไตล์ชีตของคุณได้ทันที
คำถามที่พบบ่อย
- เครื่องมือนี้สร้าง gradient แบบไหนได้บ้าง?
- สร้างได้ทั้งแบบเส้นตรง (linear-gradient) และแบบรัศมี (radial-gradient) พร้อมปรับทิศทาง มุม และเพิ่มจุดสีได้หลายจุดเพื่อให้ไล่สีได้ตามต้องการ
- โค้ดที่ได้นำไปใช้ได้เลยไหม?
- ได้เลย เครื่องมือสร้างโค้ด CSS มาตรฐานที่พร้อมวางในคุณสมบัติ background ของสไตล์ชีต ใช้ได้กับทุกเบราว์เซอร์สมัยใหม่
- ปรับทิศทางการไล่สีได้ไหม?
- ได้ คุณกำหนดมุมหรือทิศทางได้ เช่น ไล่จากบนลงล่าง ซ้ายไปขวา หรือทแยงมุม แล้วดูผลทันที
- ใช้งานฟรีไหม?
- ฟรี ไม่ต้องสมัครสมาชิก ออกแบบและคัดลอกโค้ดได้ไม่จำกัด
- ต้องเขียน CSS เป็นไหมถึงจะใช้ได้?
- ไม่จำเป็น เลือกสีและปรับแบบเห็นภาพได้เลย เครื่องมือจะเขียนโค้ด CSS ให้คุณเอง คุณแค่คัดลอกไปใช้