Stax
Tools

CSS Gradient Generator

Build linear and radial CSS gradients visually and copy ready-to-use CSS.

0°90°180°270°360°
#6366f1
0%
#ec4899
100%
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);

CSS gradients — ไม่ต้องใช้รูปภาพ

ตารางอ้างอิงมุม gradient

เคล็ดลับสำหรับ gradient ที่สวยงาม

ก่อนที่จะมี CSS gradient นักพัฒนาใช้ background image (มักเป็น GIF ขนาด 1px) เพื่อสร้างการเปลี่ยนสี ปัจจุบัน ฟังก์ชัน CSS linear-gradient() และ radial-gradient() สร้าง gradient ที่นุ่มนวล ไม่ขึ้นกับความละเอียด และปรับขนาดได้อย่างสมบูรณ์แบบในทุกความหนาแน่นของหน้าจอ

Gradient เร็วกว่ารูปภาพ (ไม่มี network request) ตอบสนองได้เต็มที่ และสามารถเคลื่อนไหวได้ด้วย CSS transition

นักออกแบบเว็บใช้ linear gradient เพื่อสร้างพื้นหลัง hero section โดยไม่ต้องโหลดรูปภาพขนาดใหญ่ — gradient สองจุดที่ 135° แสดงผลทันทีและคมชัดในทุกความหนาแน่นของหน้าจอ นักพัฒนา UI ใช้ radial gradient กับ hover state ของปุ่มและพื้นหลัง card เพื่อสร้างความลึก ผู้สร้าง landing page ใช้ gradient หลายจุดเป็นพื้นหลังแบบเต็มหน้าเพื่อเพิ่มความน่าสนใจทางภาพโดยไม่ต้องใช้ stock photo CSS gradient ยังใช้สำหรับ progress bar, loading skeleton และตัวแบ่งส่วนแบบตกแต่งระหว่างส่วนต่างๆ ของหน้า

  • 0° — จากล่างขึ้นบน
  • 45° — จากล่างซ้ายไปบนขวา
  • 90° — จากซ้ายไปขวา
  • 135° — จากบนซ้ายไปล่างขวา
  • 180° — จากบนลงล่าง
  • ใช้โทนสีที่ใกล้เคียงกัน — gradient ระหว่างสีที่อยู่ใกล้กัน (เช่น ม่วงถึงชมพู) ดูธรรมชาติกว่าระหว่างสีตรงข้าม
  • หลีกเลี่ยงจุดกึ่งกลางที่ดูขุ่น — ถ้าสองสีสร้างสีเทาหรือน้ำตาลตรงกลาง ให้เพิ่ม stop กลางที่มีสีสว่างกว่าของสีใดสีหนึ่ง
  • ใช้ gradient ที่บางเบาสำหรับพื้นหลัง — สำหรับพื้นหลัง UI ให้ความแตกต่างของสีน้อยๆ (เช่น สีน้ำเงินสองเฉดที่ใกล้เคียงกัน) เพื่อลุคที่เรียบร้อย

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

What is a CSS gradient?
A CSS gradient is a smooth transition between two or more colors defined entirely in CSS — no image file needed. Gradients are defined using the linear-gradient() or radial-gradient() CSS functions and can be used anywhere a background image is accepted.
What is the difference between linear and radial gradients?
A linear gradient transitions colors along a straight line at a given angle (0° = bottom to top, 90° = left to right, 135° = diagonal). A radial gradient radiates outward from a center point in a circular or elliptical shape.
How do I use the generated CSS?
Copy the generated CSS and paste it into your stylesheet. For example: .hero { background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%); }. It works in all modern browsers without any prefix.
Can I add more than two color stops?
Yes. Click 'Add Stop' to insert additional color stops anywhere along the gradient. Each stop has a color and a position (0–100%). You can create complex multi-color gradients with as many stops as needed.
Do CSS gradients work everywhere?
Yes. linear-gradient() and radial-gradient() are supported in all modern browsers (Chrome, Firefox, Safari, Edge) without any vendor prefix. Browser support is effectively 100% for current users.

เครื่องมือที่เกี่ยวข้อง