Color Gradient คืออะไร และวิธีสร้างใน CSS ครับ

CSS color gradient คือการไล่สีอย่างนุ่มนวลระหว่างสองสีขึ้นไป โดยเบราว์เซอร์เรนเดอร์ทั้งหมดโดยไม่ต้องใช้ไฟล์รูปภาพเลย แค่ข้อเท็จจริงนี้ก็ทำให้ gradient กลายเป็นหนึ่งในเครื่องมือที่ใช้งานได้จริงที่สุดสำหรับนักพัฒนา front-end แล้วครับ ช่วยลด HTTP request ได้ ขยายขนาดได้สมบูรณ์แบบทุกความละเอียด และแก้ไขได้ด้วยโค้ดแค่บรรทัดเดียว ไม่ว่าจะสไตล์ปุ่ม call-to-action สร้าง hero background เต็มหน้า หรือเพิ่มมิติให้ card component การเข้าใจวิธีทำงานของ CSS gradient จะให้คุณควบคุมทุก pixel ของการเปลี่ยนสีได้อย่างแม่นยำครับ

อธิบาย Linear Gradient

ฟังก์ชัน linear-gradient ใน CSS วาดการเปลี่ยนสีตามแนวเส้นตรง syntax พื้นฐานมีลักษณะดังนี้ครับ:

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

พารามิเตอร์ direction ควบคุม ทิศทางของ gradient ใช้ได้ทั้ง keyword เช่น to right, to bottom left หรือระบุเป็นองศาอย่าง 135deg ถ้าไม่ระบุทิศทาง ค่าเริ่มต้นจะเป็น to bottom (จากบนลงล่าง 180 องศา)

Color stop ให้ความยืดหยุ่นในการควบคุมสูง แต่ละ stop สามารถระบุตำแหน่งเพิ่มเติมได้ครับ:

/* สองสี จากซ้ายไปขวา */
background-image: linear-gradient(to right, #6a11cb, #2575fc);

/* สามสี พร้อมระบุตำแหน่งชัดเจน */
background-image: linear-gradient(135deg, #f093fb 0%, #f5576c 50%, #fda085 100%);

การใส่ตำแหน่งเป็นเปอร์เซ็นต์ให้แต่ละ stop ช่วยสร้างขอบคมชัด (กำหนด stop สองตัวที่ตำแหน่งเดียวกัน) หรือบีบ/ขยายโซนการเปลี่ยนสีได้ นี่คือพื้นฐานของการทำ stripe pattern และ progress bar ก่อนใช้ค่าสี ควรเข้าใจก่อนว่า CSS ตีความค่าสีอย่างไร - คู่มือ การแปลง HEX เป็น RGB ของเราอธิบายความแตกต่างระหว่างรูปแบบต่างๆ และควรใช้แบบไหนในสถานการณ์ใดไว้ครับ

อธิบาย Radial Gradient

radial-gradient ใน CSS แผ่สีออกจากจุดศูนย์กลางเป็นรูปทรงรีหรือวงกลม syntax มีพารามิเตอร์เพิ่มเติมสามตัวคือ shape, size และ position ครับ

background-image: radial-gradient(shape size at position, color-stop1, color-stop2);

แต่ละพารามิเตอร์ทำหน้าที่ดังนี้:

• Shape: circle บังคับให้เป็นวงกลมสมบูรณ์ ส่วน ellipse (ค่าเริ่มต้น) จะยืดให้พอดีกับ element
• Size: keyword เช่น closest-side, farthest-corner หรือระบุความยาวเองเพื่อกำหนดว่า gradient ขยายออกไปไกลแค่ไหน
• Position: ทำงานเหมือน background-position ทุกประการ ใช้ได้ทั้ง keyword, เปอร์เซ็นต์ หรือค่า pixel

/* เอฟเฟกต์ spotlight */
background-image: radial-gradient(circle at 30% 40%, rgba(255,255,255,0.3), transparent 60%);

Radial gradient เหมาะมากสำหรับเอฟเฟกต์ spotlight, ปุ่มที่มีแสงเรืองรอง และ vignette overlay แบบนุ่มนวลบน hero image ครับ

Conic Gradient - ฟีเจอร์ใหม่ที่ควรรู้

ฟังก์ชัน conic-gradient ใน CSS เป็นฟังก์ชันใหม่ที่สุดในสามตัว และเป็นตัวที่นักพัฒนาส่วนใหญ่มักข้ามไป แทนที่จะแผ่ออกจากจุดศูนย์กลาง มันจะวนรอบจุดศูนย์กลางเหมือน color wheel หรือ pie chart สเปก W3C CSS Images Level 4 กำหนด conic gradient ไว้อย่างเป็นทางการ และเบราว์เซอร์สมัยใหม่ทุกตัวรองรับแล้วครับ

/* Pie chart - สีน้ำเงิน 40%, สีปะการัง 60% */
background-image: conic-gradient(#4f8ef7 0% 40%, #ff6b6b 40% 100%);

/* Color wheel เต็มรูปแบบ */
background-image: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);

ปรับมุมเริ่มต้นด้วย from Xdeg และเลื่อนจุดศูนย์กลางด้วย at X% Y% ได้ด้วยครับ:

background-image: conic-gradient(from 45deg at 60% 50%, #667eea, #764ba2, #667eea);

การใช้งานจริงได้แก่ pie chart ด้วย CSS ล้วนๆ, checkerboard pattern และ loading spinner แบบไดนามิกครับ

Repeating Gradient

CSS มี repeating-linear-gradient และ repeating-radial-gradient สำหรับปูลาย gradient ซ้ำทั่ว element โดยไม่ต้องระบุ color stop เป็นสิบๆ ตัวเอง กฎสำคัญคือ pattern จะทำซ้ำก็ต่อเมื่อ color stop สุดท้ายยังไม่ถึง 100% ครับ

/* ลายทแยงมุม */
background-image: repeating-linear-gradient(
  45deg,
  #f8f9fa,
  #f8f9fa 10px,
  #dee2e6 10px,
  #dee2e6 20px
);

/* วงกลมซ้อนกัน */
background-image: repeating-radial-gradient(
  circle at center,
  #fff 0px,
  #fff 5px,
  #e9ecef 5px,
  #e9ecef 10px
);

Repeating gradient ประหยัด resource มากครับ เพราะเบราว์เซอร์สร้าง pattern ทั้งหมดจาก CSS rule ขนาดเล็ก ไม่ต้องโหลด asset รูปภาพเพิ่มเลย

ตัวอย่างการใช้งานจริง

ปุ่มแบบ Gradient

การใช้งานที่พบบ่อยคือปุ่ม call-to-action ที่โดดเด่น เทคนิคคือตั้งค่า background-size ด้วยและเพิ่ม animation เมื่อ hover:

.btn-gradient {
  background-image: linear-gradient(90deg, #6a11cb, #2575fc);
  border: none;
  border-radius: 6px;
  color: #fff;
  padding: 12px 28px;
  transition: opacity 0.3s ease;
}
.btn-gradient:hover {
  opacity: 0.85;
}

Hero Background เต็มหน้า

CSS background gradient บน body หรือ hero section กำหนดโทนภาพรวมได้ทันทีครับ:

.hero {
  background-image: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  min-height: 100vh;
}

Overlay มืดบนรูปภาพ

การซ้อน gradient ทับบนรูปถ่ายช่วยให้ข้อความอ่านได้ง่ายโดยไม่ต้องสร้าง overlay element แยกต่างหาก:

.card-image {
  background-image:
    linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.75) 100%),
    url('photo.jpg');
  background-size: cover;
}

Gradient บนข้อความ

การทำ gradient บนข้อความต้องใช้สาม property ร่วมกันครับ:

.gradient-text {
  background-image: linear-gradient(90deg, #f093fb, #f5576c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

โปรดทราบว่า background-clip: text ยังต้องการ prefix -webkit- ในบางเบราว์เซอร์ ดังนั้นควรใส่ทั้งสอง declaration เสมอครับ ลองสำรวจและตรวจสอบค่าสีก่อนเขียนโค้ดได้ที่ เครื่องมือ Color Explorer

ความเข้ากันได้กับเบราว์เซอร์และ Fallback

Linear และ radial gradient รองรับครบทุกเบราว์เซอร์หลักมาตั้งแต่ปี 2013 แล้วครับ ส่วน conic gradient รองรับในวงกว้างตั้งแต่ปี 2021 (Chrome 69, Firefox 83, Safari 12.1) ตาม Can I Use conic gradient ครอบคลุมการใช้งานเบราว์เซอร์ทั่วโลกมากกว่า 93% แล้ว

กลยุทธ์ fallback ที่ถูกต้องทำได้ไม่ยากครับ:

1. ประกาศ background-color แบบ solid ก่อน เบราว์เซอร์ที่ไม่รองรับ gradient จะแสดงสีนี้แทน
2. ตามด้วย rule background-image แบบ gradient เบราว์เซอร์ที่รองรับจะแสดงทับขึ้นมา
3. สำหรับ conic gradient ให้เพิ่ม fallback แบบ linear-gradient ระหว่าง solid color กับ conic rule

.element {
  background-color: #6a11cb;                        /* fallback */
  background-image: linear-gradient(90deg, #6a11cb, #2575fc); /* เบราว์เซอร์สมัยใหม่ */
}

หลังเขียน gradient rule เสร็จแล้ว ลองนำ stylesheet ไปผ่าน CSS Minifier เพื่อลบ whitespace และลดขนาดไฟล์ก่อน deploy ได้เลยครับ

สร้าง CSS Gradient ได้ทันที

การเขียน gradient syntax เองนั้นรวดเร็วเมื่อคุ้นแล้ว แต่การพรีวิวสีหลายสิบคอมบิเนชันแบบ real-time ต่างหากที่ เครื่องมือสร้าง gradient ออนไลน์ ช่วยประหยัดเวลาได้จริงครับ แทนที่จะรีเฟรชเบราว์เซอร์ซ้ำๆ คุณลาก color stop ปรับมุม แล้วคัดลอก CSS สุดท้ายได้ในไม่กี่วินาที

ถ้าต้องการแปลงสีจากไฟล์ดีไซน์ก่อนสร้าง gradient เครื่องมือ แปลง HEX เป็น RGB และ Color Picker เป็นจุดเริ่มต้นที่ดีก่อนเปิด gradient builder ครับ

สร้าง CSS Gradient สวยๆ ได้ทันที

ฟรี ไม่ต้องสมัครสมาชิก ใช้งานได้ในเบราว์เซอร์เลย สร้าง linear, radial และ conic gradient พร้อม live preview และ CSS output ที่พร้อมคัดลอก

ลองใช้ DevDeck Color Tool เลย →

สรุป

CSS gradient แทนที่ image asset ด้วยโค้ดล้วนๆ ทำให้ได้ gradient ที่ไม่ขึ้นกับความละเอียด แก้ไขง่าย และโหลดเร็วครับ เริ่มจาก linear-gradient สำหรับการเปลี่ยนสีแบบมีทิศทาง ใช้ radial-gradient สำหรับเอฟเฟกต์ spotlight และแสงเรืองรอง และลองเล่น conic-gradient เมื่อต้องการ pattern แบบ pie หรือการวนรอบ อย่าลืมใส่ fallback สีแบบ solid เสมอ ดูแล prefix requirement สำหรับ text gradient และใช้เครื่องมือแบบ live เพื่อเร่งรอบการออกแบบ เมื่อมีพื้นฐานเหล่านี้แล้ว คุณก็พร้อมแทนที่รูปภาพ gradient แบบ static ทั่วทั้งโปรเจกต์ได้เลยครับ