เครื่องมือสร้าง
CSS Gradient
เครื่องมือสร้างพื้นหลัง CSS Gradient (Linear, Radial, Conic) และ Pattern ด้วย UI ที่ใช้งานง่าย รองรับการลากและวาง มีพรีเซ็ต 24 แบบ และดูตัวอย่างได้แบบเรียลไทม์ ใช้งานฟรี ปลอดภัย ไม่ต้องติดตั้ง
แก้ไขสีที่เลือก
โค้ด CSS ที่ได้
โค้ด CSS ที่ได้
เกี่ยวกับเครื่องมือสร้าง CSS Gradient
เครื่องมือสร้าง CSS Gradient เป็นเครื่องมือฟรีสำหรับนักพัฒนาและนักออกแบบ ช่วยให้คุณสามารถออกแบบพื้นหลัง Gradient หรือ Pattern ได้อย่างสวยงามด้วย CSS ล้วนๆ โดยไม่ต้องใช้ JavaScript หรือไฟล์รูปภาพ ด้วย UI ที่ใช้งานง่าย คุณสามารถสร้าง Gradient ได้หลากหลายรูปแบบ ทั้ง Linear, Radial และ Conic พร้อมคัดลอกโค้ดไปใช้งานในโปรเจกต์ได้ทันที
คุณสามารถปรับเพิ่มสีหรือตั้งค่าความโปร่งแสง (Alpha) ได้อย่างลื่นไหลผ่านแถบเลื่อน นอกจากนี้ยังมีพรีเซ็ตสำเร็จรูป 24 แบบ และ Pattern Generator อีก 12 แบบให้เลือกใช้งาน ช่วยให้คุณเปลี่ยนไอเดียให้เป็นโค้ดได้แบบจบครบในเบราว์เซอร์เดียว
วิธีใช้งาน
เลือกประเภทและการตั้งค่า
ไปที่แท็บ 'Gradient' แล้วเลือกสไตล์ที่คุณต้องการ (Linear, Radial หรือ Conic) สำหรับ Linear ให้ปรับเลื่อนมุมองศา สำหรับ Radial ให้เลือกจุดศูนย์กลางและรูปร่างเพื่อกำหนดทิศทางของแสง
เพิ่มและแก้ไขจุดสี
คลิกบนแถบเหนือ Gradient เพื่อเพิ่มสีใหม่ ลากหมุดเพื่อปรับความสมูทของการไล่สี และใช้เครื่องมือเลือกสีด้านล่าง (HEX หรือ HSLA) เพื่อปรับแต่งเฉดสีและความโปร่งแสง
ดูพรีวิวและคัดลอกโค้ด
คุณสามารถตรวจสอบผลลัพธ์ได้ทันทีในหน้าต่างพรีวิว สามารถกดปุ่ม 'เต็มหน้าจอ' ที่มุมขวาบนเพื่อดูการแสดงผลจริง จากนั้นกดปุ่ม 'คัดลอก CSS' ด้านล่างเพื่อนำโค้ดไปใช้งาน
คำศัพท์เกี่ยวกับ Gradient
- CSS Gradient
- เทคนิคที่ใช้ฟังก์ชัน CSS (เช่น linear-gradient() หรือ radial-gradient()) ในการวาดพื้นหลังที่มีการไล่สีอย่างนุ่มนวล โดยไม่ต้องใช้รูปภาพ ช่วยเพิ่มความเร็วในการโหลดหน้าเว็บ
- Color Stop (จุดสี)
- ตำแหน่ง (ตั้งแต่ 0% ถึง 100%) ใน Gradient ที่กำหนดว่าสีแต่ละสีจะเริ่มหรือสิ้นสุดที่ใด การเพิ่มจุดสีหรือวางไว้ใกล้กันจะช่วยสร้างเส้นขอบที่คมชัดได้
- Linear Gradient (ไล่สีแบบเส้นตรง)
- รูปแบบการไล่สีที่นิยมที่สุด สีจะเปลี่ยนไปตามแนวเส้นตรงตามมุมที่กำหนด (เช่น 135deg) หรือทิศทาง (เช่น to right)
- Radial Gradient (ไล่สีแบบรัศมี)
- การไล่สีที่จะแผ่ออกมาจากจุดศูนย์กลางที่กำหนด โดยสามารถเป็นรูปวงกลม (circle) หรือวงรี (ellipse)
- Conic Gradient (ไล่สีแบบกรวย)
- การไล่สีแบบหมุนตามเข็มนาฬิการอบแกนกลาง มักใช้ทำวงล้อสีหรือกราฟวงกลมด้วย CSS ล้วน
- ระบบสี HSLA
- วิธีการกำหนดสีโดยใช้ 4 ค่า ได้แก่ Hue (เฉดสี), Saturation (ความอิ่มตัว), Lightness (ความสว่าง) และ Alpha (ความโปร่งแสง) ซึ่งช่วยให้ปรับแต่งสีให้เข้มขึ้นหรือสว่างขึ้นได้ง่ายและเป็นธรรมชาติกว่า
คำถามที่พบบ่อย
- Q.โค้ด CSS ที่สร้างขึ้นสามารถนำไปใช้ในเว็บไซต์เชิงพาณิชย์ได้หรือไม่?
- ได้แน่นอน โค้ดที่ได้จากการสร้างนี้ไม่มีลิขสิทธิ์ คุณสามารถนำไปใช้ได้ฟรีทั้งในงานส่วนตัวและเชิงพาณิชย์
- Q.สามารถใช้งานเครื่องมือนี้บนสมาร์ทโฟนได้หรือไม่?
- ได้ เครื่องมือนี้รองรับการใช้งานบนมือถืออย่างเต็มรูปแบบ คุณสามารถแตะหรือลากเพื่อจัดการสีบนหน้าจอสัมผัสได้อย่างสะดวกสบาย
- Q.ทำไม Gradient ถึงไม่แสดงบนเบราว์เซอร์เก่าๆ เช่น IE?
- เบราว์เซอร์รุ่นเก่ารวมถึง IE11 ไม่รองรับฟังก์ชัน CSS สมัยใหม่ (โดยเฉพาะ conic-gradient) โค้ดที่เครื่องมือนี้สร้างขึ้นมีไว้สำหรับเบราว์เซอร์ยุคใหม่ แนะนำให้เพิ่ม background-color แบบสีทึบไว้เป็นตัวสำรอง (Fallback) ด้วย
- Q.จะปรับขนาดของลวดลาย (Pattern) ได้อย่างไร?
- คุณสามารถปรับขนาดได้ที่แถบเลื่อน 'ขนาด' ในแท็บ Pattern ซึ่งจะไปเปลี่ยนค่า background-size ในโค้ด CSS โดยอัตโนมัติ
- Q.สามารถบันทึก Gradient เป็นไฟล์รูปภาพได้หรือไม่?
- เนื่องจากเครื่องมือนี้เน้นการสร้างโค้ด CSS จึงไม่มีปุ่มดาวน์โหลดเป็นไฟล์ PNG/JPG แต่คุณสามารถกดดูแบบ 'เต็มหน้าจอ' แล้วใช้ฟังก์ชันจับภาพหน้าจอ (Screenshot) ของอุปกรณ์เพื่อบันทึกเป็นรูปภาพได้
กรณีการใช้งาน
ออกแบบ Hero Section
การใช้ Gradient สีพาสเทลหรือสีพระอาทิตย์ตกบนพื้นที่แรกสุดของเว็บไซต์ (Hero Section) เป็นวิธีดึงดูดความสนใจของผู้ใช้ได้อย่างรวดเร็ว
เอฟเฟกต์กระจก (Glassmorphism)
เพียงแค่ลดความทึบแสงของ Gradient และใช้งานร่วมกับ backdrop-filter: blur() คุณก็จะได้ UI แบบกระจกโปร่งแสงที่ดูทันสมัย
พื้นหลัง Pattern ที่โหลดไว
การสร้างลวดลายจุดหรือลายทางด้วย CSS ล้วนๆ แทนการใช้ไฟล์ภาพ จะช่วยให้เว็บไซต์โหลดได้รวดเร็วมากยิ่งขึ้น โดยไม่ทำให้คะแนน PageSpeed ลดลง
การสร้างกราฟด้วย CSS
การใช้ Conic Gradient มีประโยชน์มากสำหรับการสร้างกราฟวงกลม (Pie chart) หรือแถบความคืบหน้า (Progress bar) ได้ง่ายๆ ด้วย CSS โดยไม่ต้องพึ่งพา JavaScript
ส่งความคิดเห็น
โปรดแจ้งให้เราทราบความคิดเห็นของคุณเพื่อช่วยปรับปรุงเครื่องมือ
การส่งความคิดเห็นถูกระงับชั่วคราว
เซิร์ฟเวอร์ไม่ว่างหรือระบบป้องกันสแปมทำงานอยู่ โปรดลองอีกครั้งในภายหลัง