วิธีใช้งาน
- เริ่มจากแบบสำเร็จรูปหรือการไล่สีเริ่มต้น
- คลิกที่แถบเพื่อเพิ่มสี แล้วลากจุดสีเพื่อย้ายตำแหน่ง
- เลือกแบบเส้นตรง แบบรัศมี หรือแบบกรวย แล้วปรับมุมหรือจุดกึ่งกลาง
- คัดลอกคำประกาศ CSS หรือคลาส Tailwind
คำอธิบายตัวเลือก
- เชิงเส้น
- สีจะเปลี่ยนไปตามเส้นตรง 0° ชี้ขึ้นด้านบน 90° ชี้ไปทางขวา และ 180° ชี้ลงด้านล่าง
- แบบรัศมี
- สีจะแผ่ออกจากจุดกึ่งกลางเป็นวงกลมหรือวงรีที่พอดีกับองค์ประกอบนั้น
- แบบกรวย
- สีจะกวาดไปรอบจุดกึ่งกลาง คล้ายวงล้อสีหรือแผนภูมิวงกลม
- ทำซ้ำ
- ทำซ้ำรูปแบบ ตั้งจุดสีให้อยู่ในช่วงสั้น ๆ เช่น 0% ถึง 10% เพื่อสร้างลายแถบ
โค้ดที่สร้างขึ้นมีหน้าตาอย่างไร
สองสีเดียวกันที่เขียนโดยแต่ละประเภท จุดหยุดสีจะเขียนด้วยตำแหน่งเป็นเปอร์เซ็นต์เสมอ:
linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%)
radial-gradient(ellipse at 50% 50%, #ff7e5f 0%, #feb47b 100%)
conic-gradient(from 0deg at 50% 50%, #ff7e5f 0%, #feb47b 100%)
repeating-linear-gradient(45deg, #000000 0%, #ffffff 10%)เวอร์ชัน Tailwind ห่อค่าเดียวกันไว้ในคลาสแบบ arbitrary-value ช่องว่างกลายเป็นขีดล่าง และช่องว่างหลังจุลภาคถูกลบออก:
bg-[linear-gradient(135deg,#ff7e5f_0%,#feb47b_100%)]ในบรรทัด CSS สุดท้าย รูปแบบจะซ้ำทุก 10% ของเอลิเมนต์ ทำให้เกิดแถบบาง สำหรับ conic gradient มุมคือจุดที่การกวาดเริ่มต้น และสำหรับ radial gradient เปอร์เซ็นต์สองค่าคือจุดกึ่งกลาง
คำถามที่พบบ่อย
เบราว์เซอร์ใดรองรับการไล่สีเหล่านี้
การไล่สีแบบเส้นตรง แบบรัศมี และแบบกรวยใช้ได้ใน Chrome, Edge, Firefox และ Safari รุ่นปัจจุบันทั้งหมด โดยไม่ต้องใช้ vendor prefix
จะสร้างการไล่สีแบบโปร่งใสได้อย่างไร
พิมพ์สีที่มี alpha channel เช่น #00000000 ซึ่งเป็นสีดำโปร่งใสทั้งหมด ลงในช่องสีของจุดสี
จะใช้คลาส Tailwind ได้อย่างไร
เพิ่มคลาสนี้ในรายการคลาสขององค์ประกอบที่ใช้ Tailwind CSS 3 หรือ 4 คลาสนี้ใช้ arbitrary value จึงไม่ต้องตั้งค่าเพิ่มเติม
ความเป็นส่วนตัว
เครื่องมือนี้ทำงานในเบราว์เซอร์ของคุณทั้งหมด ไฟล์และข้อความของคุณได้รับการประมวลผลบนอุปกรณ์ของคุณ และจะไม่ถูกอัปโหลดไปยังเซิร์ฟเวอร์ของเรา