Drag stops, tune angles, copy CSS or Tailwind — export PNG in one click.
Drag handles on the track. Double-click the track to add a stop. Select a stop and press Delete to remove.
CSS Gradient คือเทคนิคการสร้างการไล่สีโดยตรงด้วย CSS โดยไม่ต้องใช้ไฟล์ภาพ ซึ่งช่วยลดเวลาโหลดหน้าเว็บและปรับแต่งได้ง่ายกว่า มี 3 ประเภทหลัก ได้แก่ Linear Gradient ที่ไล่สีในทิศทางเส้นตรง เช่น บนลงล่างหรือซ้ายไปขวา Radial Gradient ที่ไล่สีจากจุดศูนย์กลางออกไปเป็นวงกลมหรือวงรี และ Conic Gradient ที่ไล่สีรอบจุดศูนย์กลางแบบเข็มนาฬิกา เหมาะสำหรับสร้าง pie chart และ color wheel แต่ละประเภทมีวากยสัมพันธ์ที่แตกต่างกันและเหมาะกับงานต่างกัน
ในงาน Web Design จริง CSS Gradient ถูกใช้อย่างกว้างขวางในหลายตำแหน่ง Hero Background ของเว็บไซต์มักใช้ Linear Gradient เพื่อสร้างพื้นหลังที่สวยงามโดยไม่ต้องโหลดรูป Card Background ใช้ gradient เพื่อสร้างความลึกและความโมเดิร์น Button Hover Effect มักใช้ Linear Gradient เพื่อให้ปุ่มดูมีมิติ และ Text Gradient เป็นเทคนิค advanced ที่ใช้ CSS clip สร้างตัวอักษรที่มีการไล่สี นอกจากนี้ยังใช้สร้าง overlay บนรูปภาพเพื่อให้ข้อความอ่านง่ายขึ้น
ตัวอย่าง CSS Code จริงสำหรับแต่ละประเภท ได้แก่ Linear: background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) สำหรับ hero section, Radial: background: radial-gradient(circle at center, #3b82f6, #1e1b4b) สำหรับ spotlight effect และ Conic: background: conic-gradient(from 0deg, #f59e0b, #ef4444, #8b5cf6, #f59e0b) สำหรับ rainbow ring สำหรับ browser support ทุก gradient รองรับใน Chrome, Firefox, Safari, Edge เวอร์ชันปัจจุบัน conic-gradient รองรับตั้งแต่ Chrome 69+ และ Safari 12.1+
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%)background: linear-gradient(180deg, #3b82f6, #2563eb)background: linear-gradient(to bottom, #ff6b6b, #feca57, #48dbfb)background-clip: text; -webkit-text-fill-color: transparent--gradient-primary เพื่อใช้ซ้ำทั้งโปรเจกต์ใช้แทนได้และมีข้อดีหลายอย่าง ได้แก่ ไม่ต้องโหลดไฟล์ภาพทำให้หน้าเร็วขึ้น ปรับสีและทิศทางได้ง่ายผ่าน CSS หรือ CSS variable รองรับ responsive โดยไม่ต้องมีหลายขนาด และแก้ไขได้ตลอดเวลาโดยไม่ต้องส่งไฟล์ใหม่ ข้อเสียคือไม่สามารถสร้าง texture หรือ pattern ที่ซับซ้อนได้เท่ารูปภาพจริง
Conic Gradient รองรับใน Chrome 69+ (2018), Safari 12.1+ (2019), Firefox 83+ (2020) และ Edge 79+ ซึ่งครอบคลุม browser ส่วนใหญ่ในปัจจุบันแล้ว ถ้าต้องรองรับ browser เก่า ควรใส่ fallback เช่น solid color หรือ radial gradient ไว้ก่อน แล้วตามด้วย conic gradient
CSS Gradient ไม่สามารถ animate ได้โดยตรงด้วย transition เพราะไม่ใช่ animatable property แต่สามารถใช้เทคนิคต่างๆ ได้แก่ animate ด้วย background-position บน gradient ขนาดใหญ่, ใช้ CSS Houdini @property สำหรับ browser ที่รองรับ, หรือใช้ pseudo-element เพื่อ fade ระหว่าง gradient สองชั้น เครื่องมือนี้ช่วย generate CSS static gradient พร้อม copy ได้ทันที
CSS Gradient มีหลักๆ 3 ชนิด ได้แก่ Linear Gradient ที่ไล่สีในทิศทางเส้นตรง, Radial Gradient ที่ไล่สีจากจุดศูนย์กลางออกด้านนอกเป็นวงกลมหรือวงรี, และ Conic Gradient ที่ไล่สีรอบจุดศูนย์กลางแบบวงกลม เหมาะสำหรับทำ pie chart และ color wheel โดย Linear Gradient นิยมใช้มากที่สุดสำหรับพื้นหลังเว็บไซต์และปุ่ม
linear-gradient ใช้สำหรับสร้างพื้นหลังที่ไล่สีในทิศทางใดทิศทางหนึ่ง เช่น จากซ้ายไปขวา บนลงล่าง หรือแนวทแยง เหมาะสำหรับ hero section และปุ่ม ส่วน radial-gradient สร้าง spotlight effect หรือ glow effect จากจุดศูนย์กลาง เหมาะสำหรับพื้นหลังที่ต้องการความลึก เช่น การจำลองแสง นักออกแบบมักใช้ linear-gradient ซ้อนกันหลายชั้นเพื่อสร้าง texture ที่ซับซ้อน
Tailwind CSS มี utility class สำหรับ gradient เช่น bg-gradient-to-r from-blue-500 to-purple-500 ซึ่งง่ายต่อการใช้งาน แต่มีข้อจำกัดคือรองรับเฉพาะ linear gradient และไม่สามารถตั้งค่า position ของ color stop ได้แบบละเอียด สำหรับ gradient ที่ซับซ้อนกว่า ควรใช้arbitrary value เช่น bg-[linear-gradient(...)] หรือเขียน CSS ตรงๆ เครื่องมือนี้สามารถ export เป็น Tailwind format ได้โดยตรง
หลังจากออกแบบ gradient ที่ต้องการแล้ว กดปุ่ม "Copy CSS" เพื่อคัดลอก CSS code เช่น background: linear-gradient(135deg, #3b82f6, #8b5cf6) นำ code นี้ไปวางใน stylesheet ของ project ได้ทันที หรือใช้ "Copy Tailwind" สำหรับโปรเจกต์ที่ใช้ Tailwind CSS นอกจากนี้ยังสามารถดาวน์โหลดเป็นไฟล์ PNG สำหรับใช้เป็น background image ในกรณีที่ต้องการ