ตัวสร้าง CSS
- ไฟล์ไม่ออกจากอุปกรณ์ของคุณ
- ทำงานในเบราว์เซอร์
- ฟรี ไม่ต้องสมัคร ไม่มีลายน้ำ
Tailwind (arbitrary value)
shadow-[0_10px_15px_-3px_rgba(0,0,0,0.1),0_4px_6px_-4px_rgba(0,0,0,0.1)]วิธีใช้ ตัวสร้าง CSS
สร้าง CSS แบบเห็นภาพพร้อมตัวอย่างสด: เงากล่อง เส้นตัด การผ่อน cubic bezier กลาสมอร์ฟิซึม รัศมีขอบแบบหยด และเงาข้อความ แต่ละตัวสร้างให้ CSS ธรรมดาและคลาสค่าตามอำเภอใจของ Tailwind พร้อมคัดลอก
- 1
เลือกตัวสร้าง: เงากล่อง เส้นตัด cubic bezier กลาสมอร์ฟิซึม รัศมีหยด หรือเงาข้อความ
- 2
เริ่มจากค่าที่ตั้งไว้ หรือปรับแถบและสี
- 3
ลากตรงบนตัวอย่างเมื่อมี: จุด clip-path มือจับ bezier สองอัน หรือมือจับหยด
- 4
คัดลอก CSS หรือคลาส Tailwind จากผลลัพธ์ด้านล่าง
คำถามที่พบบ่อย
ซ้อนหลายเงาได้หรือไม่?
ได้ ในเงากล่อง คลิกเพิ่มเลเยอร์เพื่อรวมเลเยอร์ แต่ละอันมีออฟเซ็ต ความเบลอ การกระจาย สี ความโปร่งใส และการฝังของตัวเอง
เพิ่มหรือลบจุดบนเส้นตัดอย่างไร?
ดับเบิลคลิกขอบรูปทรงเพื่อเพิ่มจุด เลือกจุดแล้วกด Delete เพื่อลบ รูปทรงวงกลม วงรี และฝังใช้แถบแทน
ทำไมฉันมองไม่เห็นเอฟเฟกต์กระจก?
backdrop-filter เบลอเฉพาะสิ่งที่อยู่หลังองค์ประกอบ ดังนั้นต้องมีพื้นหลังที่มีสีหรือรายละเอียด ผลลัพธ์รวมคำนำหน้า -webkit- สำหรับ Safari
ค่า bezier นอก 0–1 ทำอะไร?
ค่า Y ที่เกิน 1 หรือต่ำกว่า 0 ทำให้การเคลื่อนไหวเลยเป้า ซึ่งให้เอฟเฟกต์เด้งหรือเตรียมตัว กดเล่นเพื่อเปรียบเทียบกับการเคลื่อนที่เชิงเส้น
ผลลัพธ์ Tailwind ต้องใช้ปลั๊กอินหรือไม่?
ไม่ มันใช้ไวยากรณ์ค่าตามอำเภอใจของ Tailwind เช่น rounded-[…] หรือ [clip-path:…] ซึ่งใช้ได้ใน Tailwind มาตรฐาน