พื้นหลัง ขอบ และเงา

ถ้าคุณเคยเปิดแผงด้านขวาของ Figma คุณก็ใช้แนวคิดเหล่านี้มาแล้ว ส่วน Fill ใน Figma ตรงกับ background ใน CSS ส่วน Stroke ตรงกับ border และส่วน Effects ตรงกับ box-shadow ชื่อต่างกัน แต่ความหมายเหมือนกันทุกประการ เมื่อเห็นความสัมพันธ์นี้ คุณจะจำ property ต่าง ๆ ได้ทันที

Background — Fill panel ใน CSS

Background ที่ง่ายที่สุดคือการใส่สีทึบด้วย background-color โดยใช้ค่าสีในรูปแบบใดก็ได้ เช่น hex code, rgb() หรือชื่อสี

.box {
  background-color: #7C3AED; /* สีม่วง — เหมือน solid fill ใน Figma */
}

สำหรับ image fill ให้ใช้ background-image คู่กับ url() และเพิ่ม property อีกสองตัวเพื่อให้ตรงกับ fill mode ของ Figma:

.hero {
  background-image: url('image.jpg');
  background-size: cover;       /* ขยายเต็มกล่องและตัดส่วนเกิน — เหมือน "Fill" ของ Figma */
  background-position: center;  /* จัดรูปไว้ตรงกลาง */
}

background-size: contain จะแสดงภาพให้พอดีโดยไม่ตัดส่วนใด เหมือน “Fit” mode ของ Figma

Gradient

Gradient ใช้ property background (ไม่ใช่ background-color) CSS มี gradient สองแบบหลัก ซึ่งตรงกับ gradient fill ใน Figma

Linear gradient — สีไหลตามเส้นตรง กำหนดด้วยองศา:

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

135deg คือมุม (0deg = บนลงล่าง, 90deg = ซ้ายไปขวา) คุณเพิ่ม color stop ได้มากกว่าสองจุด: linear-gradient(135deg, #667eea 0%, #764ba2 60%, #f093fb 100%)

Radial gradient — สีแผ่ออกจากจุดศูนย์กลาง:

background: radial-gradient(circle, #f093fb, #f5576c);

Border — Stroke panel ใน CSS

Shorthand border กำหนดความหนา รูปแบบเส้น และสีในบรรทัดเดียว:

border: 2px solid #7C3AED;

ค่าทั้งสามเรียงเสมอในรูปแบบ: ความหนา รูปแบบ สี เปลี่ยน solid เป็น dashed หรือ dotted เพื่อเปลี่ยนรูปแบบเส้น สามารถกำหนดรายด้านได้:

border-top: 4px solid #7C3AED;
border-bottom: 1px dashed #d8b4fe;

หรือใช้ longhand property เมื่อต้องการควบคุมละเอียดมากขึ้น:

border-width: 2px;
border-style: solid;
border-color: #7C3AED;

Border-radius — corner radius

border-radius ทำให้มุมขององค์ประกอบโค้งมน เหมือน corner radius ใน Figma:

border-radius: 8px;   /* โค้งเล็กน้อย — นิยมใช้กับการ์ด */
border-radius: 16px;  /* โค้งมากขึ้น */
border-radius: 50%;   /* วงกลมสมบูรณ์ (ใช้กับองค์ประกอบที่เป็นสี่เหลี่ยมจัตุรัส) */

กำหนดรัศมีแต่ละมุมต่างกันได้ ค่าเรียงตามเข็มนาฬิกาจากมุมบนซ้าย:

border-radius: 16px 4px 16px 4px; /* บนซ้าย, บนขวา, ล่างขวา, ล่างซ้าย */

Box-shadow — Effects panel ใน CSS

box-shadow คือ drop shadow effect ของ Figma ในรูป CSS ลำดับค่าคือ: x-offset, y-offset, blur-radius, spread-radius (ไม่บังคับ), สี:

box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.12);

ซ้อนเงาหลายชั้นด้วยการคั่นด้วยคอมมา — ช่วยสร้างความลึกที่สมจริง:

box-shadow:
  0 1px 3px rgba(0, 0, 0, 0.08),
  0 8px 24px rgba(0, 0, 0, 0.12);

สำหรับ inner shadow (เหมือน inner shadow ของ Figma) ใช้คีย์เวิร์ด inset นำหน้า:

box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);

Opacity

opacity: 0.8 ทำให้ทั้งองค์ประกอบโปร่งใส 80% รวมถึงข้อความและ children ด้วย หากต้องการให้เฉพาะ พื้นหลัง โปร่งใสแต่ข้อความยังคมชัด ให้ใช้ rgba() หรือ hsla() กับค่าสีโดยตรง:

/* เฉพาะพื้นหลังโปร่งใส ข้อความยังคง opacity เต็ม */
background-color: rgba(124, 58, 237, 0.15);

<div class="showcase">

  <div class="card card--gradient-a">
    <span class="label">Linear Gradient</span>
    <p class="desc">background: linear-gradient</p>
  </div>

  <div class="card card--gradient-b">
    <span class="label">Radial Gradient</span>
    <p class="desc">background: radial-gradient</p>
  </div>

  <div class="card card--solid">
    <span class="label">Solid + Border</span>
    <p class="desc">background-color + border</p>
  </div>

</div>

ลองแก้ CSS: เปลี่ยน border-radius ใน .card จาก 20px เป็น 4px เพื่อดูการ์ดมุมแหลม เปลี่ยนมุม gradient ใน .card--gradient-a จาก 135deg เป็น 45deg หรือเพิ่ม border: 3px dashed white ให้ .card--gradient-b การแก้ไขทุกอย่างตรงกับ control ที่คุณรู้จักใน Figma

ข้อผิดพลาดที่นักออกแบบเจอบ่อย

ลืมว่า border เพิ่มความกว้างของ element ถ้าไม่ใช้ box-sizing: border-box
ใช้รูปภาพเป็น background แทน CSS gradient ทำให้ไฟล์หนักโดยไม่จำเป็น
ค่า border-radius ไม่ตรงกันระหว่าง Figma กับ code

มุมมองของ developer

👨‍💻 สิ่งที่ developer เห็นจริง ๆ

Designer เห็น “เส้นขอบสวย” แต่ developer ต้องคำนวณว่า border นับรวมอยู่ใน width หรือไม่ (box-sizing) ก่อนจะจัด layout ให้ตรง pixel

💡 ตัวอย่างจากของจริง

Stripe ใช้ CSS gradient background แทนไฟล์รูปในหลายจุด ทำให้เพจโหลดเร็วขึ้นมากและ resize ได้โดยไม่แตก