ตัวสร้าง CSS Gradient

CSS Gradient คืออะไร?

ตัวสร้าง CSS gradient คือเครื่องมือแบบภาพที่ช่วยให้คุณสร้างการเปลี่ยนสีอย่างราบเรียบโดยไม่ต้องเขียนไวยากรณ์ gradient ด้วยมือ ใน CSS, gradient คือการเปลี่ยนผ่านระหว่างสองสีขึ้นไปอย่างราบเรียบ โดยเบราว์เซอร์แสดงผลโดยตรงโดยไม่ต้องใช้ไฟล์ภาพ ข้อกำหนด CSS Image Module Level 4 กำหนดให้ฟังก์ชัน gradient เป็นประเภทหนึ่งของค่าภาพ ซึ่งหมายความว่าสามารถใช้ได้ทุกที่ที่รับค่า background-image, list-style-image, หรือ border-image เนื่องจากเบราว์เซอร์แปลง gradient เป็นพิกเซลในขณะแสดงผล จึงรองรับทุกความละเอียดและไม่เกิดความพร่ามัวบนหน้าจอ high-DPI การใช้ตัวสร้าง CSS gradient ช่วยประหยัดเวลาและลดการเดาสุ่ม — คุณปรับสีและตำแหน่งแบบภาพ แล้วคัดลอกกฎ CSS ที่สมบูรณ์

CSS รองรับรูปทรง gradient หลักสามแบบ ได้แก่ linear (ตามเส้นตรง), radial (แผ่ออกจากจุดศูนย์กลาง) และ conic (หมุนรอบจุดศูนย์กลาง) แต่ละรูปทรงรับรายการจุดหยุดสี ซึ่งคุณระบุสีและตำแหน่งเป็นเปอร์เซ็นต์หรือความยาวได้ตามต้องการ เบราว์เซอร์คำนวณสีระหว่างจุดหยุดโดยใช้ sRGB เป็นค่าเริ่มต้น แม้ว่า CSS Color Level 4 จะอนุญาตให้ระบุ color space อื่น เช่น oklch และ lab สำหรับการเปลี่ยนสีที่ราบเรียบขึ้นในเชิงการรับรู้

Gradient ทำหน้าที่แทนพื้นหลังจากไฟล์ภาพสำหรับงานตกแต่งส่วนใหญ่บนเว็บ กฎ CSS เพียงหนึ่งบรรทัดสร้างสิ่งที่เคยต้องส่งออกจาก Photoshop และใช้ HTTP request Gradient ไม่ขึ้นกับความละเอียด ไม่ใช้แบนด์วิธเครือข่ายนอกจาก CSS เอง และสามารถใช้ animation หรือ transition ด้วยคุณสมบัติ CSS มาตรฐาน ไวยากรณ์ gradient มีความเสถียรในเบราว์เซอร์หลักทุกตัวมาตั้งแต่ปี 2013 และรูปแบบที่ไม่มี prefix ทำงานได้ใน Chrome, Firefox, Safari และ Edge โดยไม่ต้องมี fallback

ทำไมต้องใช้ตัวสร้าง CSS Gradient นี้?

การเขียนไวยากรณ์ gradient ด้วยมือหมายถึงการเดาตำแหน่งจุดหยุด ตรวจสอบค่ามุม และรีเฟรชซ้ำเพื่อดูผลลัพธ์ เครื่องมือแบบภาพช่วยให้คุณเห็น gradient ขณะสร้าง ปรับจุดหยุดด้วยการลาก และคัดลอก CSS สุดท้ายเมื่อได้ผลลัพธ์ที่ต้องการ

กรณีการใช้งานตัวสร้าง CSS Gradient

เอกสารอ้างอิงประเภท CSS Gradient

CSS กำหนดฟังก์ชัน gradient ห้าแบบ ประเภทหลักสามแบบ (linear, radial, conic) แต่ละแบบมีตัวแปรแบบซ้ำที่ทำให้รูปแบบต่อเนื่อง repeating-linear-gradient() และ repeating-radial-gradient() มีประโยชน์สำหรับพื้นหลังลายทางและวงแหวนซ้อนกัน ฟังก์ชัน gradient ทั้งหมดรับจุดหยุดสีในรูปแบบสี CSS ใดก็ได้ ทั้ง HEX, RGB, HSL, ชื่อสี หรือ oklch เบราว์เซอร์ทุกตัวรองรับฟังก์ชันทั้งห้าแบบอย่างครบถ้วน ไม่จำเป็นต้องใช้ vendor prefix

Linear vs Radial vs Conic Gradient

Gradient แต่ละประเภทจับคู่สีกับเรขาคณิตต่างกัน การเลือกประเภทที่เหมาะสมขึ้นอยู่กับเอฟเฟกต์ภาพที่ต้องการ ไม่ใช่ความแตกต่างด้านคุณภาพระหว่างกัน สำหรับพื้นหลังหน้าและตัวแบ่ง section ส่วนใหญ่ linear gradient เป็นตัวเลือกเริ่มต้นที่เหมาะสม — เข้าใจง่ายที่สุดและคาดเดาได้มากที่สุดในองค์ประกอบที่มีขนาดต่างกัน Radial และ conic gradient เหมาะสำหรับเอฟเฟกต์ภาพเฉพาะที่เรขาคณิตแบบวงกลมหรือการหมุนมีความหมาย

ตัวอย่างโค้ด

ตัวอย่างการสร้างและใช้ CSS gradient ด้วยโปรแกรมใน JavaScript, Python, CSS และ Go แต่ละตัวอย่างสร้างสตริง CSS gradient ที่ถูกต้องซึ่งสามารถใช้ใน stylesheet หรือ inline style ได้โดยตรง

// Generate a CSS linear-gradient string from an array of stops
function buildGradient(angle, stops) {
  const parts = stops.map(s => `${s.color} ${s.position}%`)
  return `linear-gradient(${angle}deg, ${parts.join(', ')})`
}

const stops = [
  { color: '#6366f1', position: 0 },
  { color: '#ec4899', position: 50 },
  { color: '#f59e0b', position: 100 },
]
buildGradient(90, stops)
// -> "linear-gradient(90deg, #6366f1 0%, #ec4899 50%, #f59e0b 100%)"

// Apply to an element
document.querySelector('.hero').style.background = buildGradient(135, stops)

# Generate a CSS gradient string for use in templates or SVGs
def build_gradient(angle: int, stops: list[tuple[str, int]]) -> str:
    parts = [f"{color} {pos}%" for color, pos in stops]
    return f"linear-gradient({angle}deg, {', '.join(parts)})"

stops = [("#6366f1", 0), ("#ec4899", 50), ("#f59e0b", 100)]
print(build_gradient(135, stops))
# -> "linear-gradient(135deg, #6366f1 0%, #ec4899 50%, #f59e0b 100%)"

# Interpolate N colors between two endpoints
def interpolate_hex(c1: str, c2: str, steps: int) -> list[str]:
    r1, g1, b1 = int(c1[1:3], 16), int(c1[3:5], 16), int(c1[5:7], 16)
    r2, g2, b2 = int(c2[1:3], 16), int(c2[3:5], 16), int(c2[5:7], 16)
    return [
        f"#{int(r1+(r2-r1)*i/(steps-1)):02x}"
        f"{int(g1+(g2-g1)*i/(steps-1)):02x}"
        f"{int(b1+(b2-b1)*i/(steps-1)):02x}"
        for i in range(steps)
    ]

interpolate_hex("#6366f1", "#f59e0b", 4)
# -> ['#6366f1', '#9a7399', '#d18042', '#f59e0b']

/* Linear gradient — left to right */
.hero {
  background: linear-gradient(90deg, #6366f1 0%, #ec4899 50%, #f59e0b 100%);
}

/* Radial gradient — circular spotlight */
.badge {
  background: radial-gradient(circle at 30% 30%, #6366f1, #312e81);
}

/* Conic gradient — color wheel */
.wheel {
  background: conic-gradient(from 0deg, #ef4444, #f59e0b, #22c55e, #3b82f6, #8b5cf6, #ef4444);
  border-radius: 50%;
}

/* Multi-stop with transparency */
.overlay {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.6) 60%,
    rgba(0, 0, 0, 0.9) 100%
  );
}

/* Repeating stripes */
.stripes {
  background: repeating-linear-gradient(
    45deg,
    #6366f1 0 10px,
    transparent 10px 20px
  );
}

package main

import "fmt"

// Stop represents one color stop in a gradient.
type Stop struct {
	Color    string
	Position int // percent 0-100
}

func buildGradient(angle int, stops []Stop) string {
	result := fmt.Sprintf("linear-gradient(%ddeg", angle)
	for _, s := range stops {
		result += fmt.Sprintf(", %s %d%%", s.Color, s.Position)
	}
	return result + ")"
}

func main() {
	stops := []Stop{
		{"#6366f1", 0},
		{"#ec4899", 50},
		{"#f59e0b", 100},
	}
	fmt.Println(buildGradient(135, stops))
	// -> "linear-gradient(135deg, #6366f1 0%, #ec4899 50%, #f59e0b 100%)"
}

คำถามที่พบบ่อย