CSS Gradients และ Box Shadows: คู่มือภาพประกอบฉบับสมบูรณ์

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

CSS Gradients

Linear Gradients

เป็น gradient ประเภทที่พบบ่อยที่สุด เปลี่ยนสีจากจุดหนึ่งไปยังอีกจุดหนึ่งในแนวเส้นตรง

/* Basic left-to-right */
background: linear-gradient(to right, #3b82f6, #8b5cf6);

/* Diagonal */
background: linear-gradient(135deg, #667eea, #764ba2);

/* Multiple stops */
background: linear-gradient(to right, #f093fb, #f5576c, #4facfe);

/* With transparency */
background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.8));

/* Hard stop (no blend) */
background: linear-gradient(to right, #3b82f6 50%, #8b5cf6 50%);

มุมสามารถกำหนดได้เป็นองศา (0deg = ล่างขึ้นบน, 90deg = ซ้ายไปขวา) หรือใช้คำสำคัญ (to top, to right, to bottom-right)

Radial Gradients

แผ่ออกจากจุดศูนย์กลางไปยังด้านนอก

/* Circular gradient */
background: radial-gradient(circle, #667eea, #764ba2);

/* Elliptical (default) */
background: radial-gradient(ellipse, #f093fb, #f5576c);

/* Positioned center */
background: radial-gradient(circle at 30% 40%, #3b82f6, transparent);

/* Spotlight effect */
background: radial-gradient(circle at center, rgba(255,255,255,0.1) 0%, transparent 70%);

Radial gradients เหมาะอย่างยิ่งสำหรับเอฟเฟกต์สปอตไลต์ แสงเรืองรอง และ vignettes

Conic Gradients

หมุนรอบจุดศูนย์กลาง — เหมือนวงล้อสีหรือ pie chart

/* Color wheel */
background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red);

/* Pie chart segments */
background: conic-gradient(
  #3b82f6 0% 35%,
  #8b5cf6 35% 60%,
  #10b981 60% 80%,
  #f59e0b 80% 100%
);

/* Checkerboard pattern */
background: conic-gradient(#eee 90deg, white 90deg 180deg, #eee 180deg 270deg, white 270deg);
background-size: 40px 40px;

Gradient text

เป็นหนึ่งในเอฟเฟกต์ UI สมัยใหม่ที่ได้รับความนิยมมากที่สุด:

.gradient-text {
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

Gradient overlays บนรูปภาพ

จำเป็นสำหรับการทำให้ข้อความอ่านได้บนรูปภาพ:

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

ใช้ CSS Gradient Generator ของเราเพื่อสร้าง gradients แบบ visual พร้อม live preview และคัดลอก CSS ได้ด้วยคลิกเดียว

Box Shadows

Syntax ของ box-shadow

box-shadow: [inset] offset-x offset-y blur-radius spread-radius color;

• offset-x / offset-y — ตำแหน่งของเงา (ค่าบวก = ขวา/ล่าง)
• blur-radius — 0 = ขอบคม, ค่ายิ่งสูง = ยิ่งนุ่ม
• spread-radius — ค่าบวกขยายเงา, ค่าลบหดเงา
• inset — วาดเงาด้านในองค์ประกอบแทนที่จะเป็นด้านนอก

เงาพื้นฐาน

/* Subtle elevation */
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

/* Card shadow */
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);

/* Large modal shadow */
box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);

/* Hard drop shadow (no blur) */
box-shadow: 4px 4px 0px #1e293b;

Multi-layer shadows

สามารถซ้อนเงาหลายชั้นด้วยเครื่องหมายจุลภาค นี่คือกุญแจสำคัญสู่เงาที่สมจริง:

/* Material Design elevation */
box-shadow:
  0 2px 1px -1px rgba(0,0,0,0.2),
  0 1px 1px 0 rgba(0,0,0,0.14),
  0 1px 3px 0 rgba(0,0,0,0.12);

/* Layered for depth */
box-shadow:
  0 1px 2px rgba(0,0,0,0.07),
  0 2px 4px rgba(0,0,0,0.07),
  0 4px 8px rgba(0,0,0,0.07),
  0 8px 16px rgba(0,0,0,0.07),
  0 16px 32px rgba(0,0,0,0.07);

วิธีที่สองกระจายพลังงานของเงาออกหลายชั้น ทำให้ความลึกค่อย ๆ ลดลงอย่างเป็นธรรมชาติมากขึ้น

Inset shadows

วาดเงาด้านในองค์ประกอบ — เหมาะสำหรับสถานะกดปุ่มและช่องกรอกข้อมูล:

/* Pressed button state */
button:active {
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

/* Input field with depth */
input {
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.06);
}

/* Frosted glass inner glow */
.glass {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.3),
    0 4px 20px rgba(0,0,0,0.2);
}

Colored shadows

เงาไม่จำเป็นต้องเป็นสีดำเสมอไป เงาสีเพิ่มความสดใสให้กับ UI:

/* Colored elevation */
.btn-primary {
  background: #3b82f6;
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4);
}

/* Dark mode glow */
.card {
  background: #1e293b;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.05), 0 8px 32px rgba(0,0,0,0.4);
}

การเปลี่ยนแปลงเงาอย่างลื่นไหล

เพิ่ม animation ให้เงาเมื่อ hover เพื่อสร้างปฏิสัมพันธ์ที่น่าพึงพอใจ:

.card {
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.card:hover {
  box-shadow: 0 12px 28px rgba(0,0,0,0.15), 0 4px 10px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}

การรวม gradients และ shadows เข้าด้วยกัน

UI ที่สวยงามที่สุดใช้ gradients และ shadows ร่วมกัน:

.premium-card {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.06),
    0 4px 6px -1px rgba(0,0,0,0.2),
    0 20px 40px -5px rgba(0,0,0,0.4);
}

.gradient-button {
  background: linear-gradient(135deg, #667eea, #764ba2);
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
  transition: all 0.2s;
}

.gradient-button:hover {
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.6);
  transform: translateY(-1px);
}

เครื่องมือที่ช่วยให้ทำงานเร็วขึ้น

• CSS Gradient Generator — สร้าง gradients แบบ visual พร้อม color stops, มุม และประเภทต่าง ๆ มี live preview พร้อมคัดลอกด้วยคลิกเดียว
• CSS Box Shadow Generator — ซ้อนเงาหลายชั้น ปรับ blur/spread/color และรับ CSS พร้อม production ได้ทันที
• Color Format Converter — แปลงระหว่าง HEX, RGB, HSL และ RGBA — จำเป็นสำหรับการกำหนดความโปร่งแสงของเงา
• Color Palette Generator — สร้างชุดสีแบบ complementary, analogous และ monochromatic เพื่อหาคู่สีที่สมบูรณ์แบบสำหรับ gradient

Gradients และ shadows ยึดกฎเดียวกับการออกแบบที่ดีทั้งหมด: ความพอดี เงาหรือ gradient ที่ออกแบบมาอย่างดีเพียงชิ้นเดียวสามารถยกระดับ component ได้ แต่ถ้ามีสิบสองชิ้นที่แข่งกันเองจะสร้างความวุ่นวาย เรียนรู้เทคนิคเหล่านี้ให้เชี่ยวชาญ แล้วนำไปใช้อย่างมีจุดประสงค์