CSS Tools ที่นักพัฒนาทุกคนควรรู้จัก

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

CSS Gradient Generator

Linear และ radial gradient มีพลังมาก แต่ syntax ไม่ใช่สิ่งที่เข้าใจง่าย:

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

มุม 135 องศา, โค้ด hex, เปอร์เซ็นต์ stop — การเขียนสิ่งนี้ตั้งแต่ต้นต้องลองผิดลองถูก เครื่องมือสร้าง gradient แบบ visual ให้คุณ:

1. เลือกสีจาก color picker
2. ลาก stop เพื่อกำหนดตำแหน่งสี
3. เลือกมุมหรือจุดศูนย์กลางแบบ radial
4. คัดลอก CSS ที่สร้างขึ้น

CSS Gradient Generator ของเรารองรับ linear และ radial gradient พร้อม color stop หลายจุดและการแสดงตัวอย่างแบบสด สำหรับแรงบันดาลใจ การผสม gradient ยอดนิยมได้แก่:

• Indigo ถึง cyan — #4F46E5 → #06B6D4
• Sunset — #f7971e → #ffd200
• Ocean — #0099f7 → #f11712

CSS Box Shadow Generator

Syntax ของ box shadow ทำให้แม้แต่นักพัฒนาที่มีประสบการณ์ก็สับสน:

box-shadow: 2px 4px 8px 0px rgba(0, 0, 0, 0.15);
/* offset-x | offset-y | blur-radius | spread-radius | color */

และ shadow ซ้อนกันได้ — คุณสามารถรวมหลายชั้นเพื่อสร้างเอฟเฟกต์ความลึก:

box-shadow:
  0 1px 2px rgba(0,0,0,0.04),
  0 4px 8px rgba(0,0,0,0.08),
  0 16px 32px rgba(0,0,0,0.12);

วิธีสามชั้นข้างต้นสร้างภาพลวงตาความลึกตามธรรมชาติที่ใช้ใน design system สมัยใหม่หลายระบบ CSS Box Shadow Generator ของเราให้คุณสร้าง shadow หลายชั้นแบบ visual และคัดลอก CSS ที่สมบูรณ์ได้

รูปแบบการออกแบบสำหรับ shadow:

• Flat / neumorphic — ละเอียดอ่อนมาก ใกล้เคียงกับสีพื้นหลัง
• Elevated card — Shadow ระดับกลาง เยื้องลงเล็กน้อย
• Floating element — Blur มากขึ้น เยื้องมากขึ้น ใช้สำหรับ modal และ dropdown
• Inset shadow — คีย์เวิร์ด inset สร้างเอฟเฟกต์กดหรือบุ๋มลง

Color Contrast Checker (ความสอดคล้องกับ WCAG)

WCAG 2.1 กำหนดอัตราส่วนความคมชัดขั้นต่ำสำหรับข้อความที่เข้าถึงได้:

• มาตรฐาน AA — 4.5:1 สำหรับข้อความปกติ, 3:1 สำหรับข้อความขนาดใหญ่ (18pt ขึ้นไป หรือ 14pt ตัวหนา)
• มาตรฐาน AAA — 7:1 สำหรับข้อความปกติ, 4.5:1 สำหรับข้อความขนาดใหญ่

อัตราส่วนเหล่านี้มีความสำคัญเพราะประมาณ 8% ของผู้ชายและ 0.5% ของผู้หญิงมีความบกพร่องในการมองเห็นสีบางรูปแบบ ข้อความที่มีความคมชัดต่ำซึ่งดูดีสำหรับคุณอาจอ่านไม่ออกสำหรับผู้ใช้บางกลุ่ม — และการไม่ผ่านมาตรฐาน WCAG อาจเป็นปัญหาการปฏิบัติตามกฎหมายในบางเขตอำนาจศาล

ความล้มเหลวที่พบบ่อย:

• ข้อความสีเทาอ่อนบนพื้นหลังสีขาว — ดูทันสมัย แต่มักไม่ผ่าน AA
• ข้อความสีบนพื้นหลังสี — ต้องตรวจสอบอย่างระมัดระวัง
• ข้อความสีขาวบนปุ่มที่มีสีความอิ่มตัวกลาง

Color Contrast Checker ของเราคำนวณอัตราส่วน WCAG สำหรับคู่สี foreground/background ใดก็ได้ และบอกคุณว่าผ่านมาตรฐานใดบ้าง

Tailwind CSS Converter

หากคุณทำงานในโค้ดเบสที่ผสม CSS ทั่วไปและ Tailwind หรือกำลังย้ายจากอันหนึ่งไปอีกอัน Tailwind CSS Converter แปลงได้ทั้งสองทิศทาง:

CSS ไปเป็น Tailwind:

/* Input */
.card {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  border-radius: 0.75rem;
  background-color: #ffffff;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
}

<!-- Output -->
<div class="flex flex-col p-6 rounded-xl bg-white shadow-md">

Tailwind ไปเป็น CSS: มีประโยชน์เมื่อคุณต้องการเข้าใจว่า class ของ Tailwind สร้างอะไรขึ้นมาจริงๆ หรือเมื่อย้าย component ออกจากโปรเจกต์ Tailwind

Color Format Converter

การพัฒนา front-end ใช้สีในหลายรูปแบบขึ้นอยู่กับบริบท:

รูปแบบ	ตัวอย่าง	ใช้สำหรับ
HEX	#4F46E5	CSS, เครื่องมือออกแบบ
RGB	rgb(79, 70, 229)	CSS, เครื่องมือออกแบบบางตัว
HSL	hsl(244, 75%, 59%)	CSS, เข้าใจได้ง่ายกว่า
HSB/HSV	hsb(244, 69%, 90%)	Photoshop, ภายใน Figma

Color Format Converter ของเราแปลงระหว่างรูปแบบเหล่านี้ทั้งหมดได้ทันที มีประโยชน์เมื่อคัดลอกสีจากเครื่องมือออกแบบและต้องการรูปแบบที่แตกต่างสำหรับ CSS ของคุณ

Color Palette Generator

การออกแบบที่ดีใช้สีที่เข้ากัน Color Palette Generator สร้างชุดสีที่กลมกลืนจากสีพื้นฐานใดก็ได้:

• Complementary — ตรงข้ามบน color wheel, contrast สูง
• Analogous — สีที่อยู่ติดกัน, เป็นเอกภาพและสงบ
• Triadic — สามสีที่เว้นระยะเท่ากัน, สดใสและสมดุล
• Monochromatic — เฉดของสีเดียว, ดูเป็นมืออาชีพและเรียบร้อย

SVG Optimizer

ไฟล์ SVG ที่ export จาก Figma หรือ Illustrator มี metadata จำนวนมาก — ความคิดเห็นของโปรแกรมแก้ไข, ชื่อ layer, นิยามที่ไม่ได้ใช้ SVG Optimizer ตัดสิ่งเหล่านี้ออกในขณะที่รักษาผลลัพธ์ที่มองเห็นไว้ โดยทั่วไปลดขนาดไฟล์ SVG ได้ 30–70%

สรุป

เครื่องมือ CSS ช่วยลบการคำนวณออกจากการออกแบบ visual ใช้ gradient generator แทนการเดาค่าองศา, ตรวจสอบอัตราส่วนความคมชัดก่อน deploy, และตรวจสอบ shadow แบบ visual ก่อนเขียนค่าลงไปตรงๆ เวลาที่ประหยัดได้จากงานเล็กๆ เหล่านี้สะสมขึ้นเรื่อยๆ ตลอดโปรเจกต์