ตัวสร้าง Text Shadow
CSS Text Shadow Generator ตั้งค่า offset, blur, สี และความโปร่งของ text-shadow พร้อมพรีวิวแบบเรียลไทม์ และซ้อนเงาได้หลายชั้นสำหรับเอฟเฟกต์เรืองแสง เส้นขอบ และตัวอักษร 3D
เกี่ยวกับเครื่องมือนี้
CSS Text Shadow Generator ตั้งค่า offset, blur, สี และความโปร่งของ text-shadow พร้อมพรีวิวแบบเรียลไทม์ และซ้อนเงาได้หลายชั้นสำหรับเอฟเฟกต์เรืองแสง เส้นขอบ และตัวอักษร 3D
วิธีใช้
- ปรับ offset แนวนอน แนวตั้ง และ blur
- เลือกสีและความโปร่งของเงา รวมถึงสีและขนาดตัวอักษร
- คลิก Add Layer เพื่อซ้อนเงาอีกชั้น หรือ Reset Layers เพื่อเริ่มใหม่
- คลิก Copy CSS
ข้อควรรู้
- รูปแบบของ text-shadow คือ offset-x offset-y blur-radius color
- text-shadow ต่างจาก box-shadow ตรงที่ไม่มีค่า spread และคีย์เวิร์ด inset
- เงาหลายชั้นคั่นด้วยคอมมา โดยชั้นแรกจะอยู่บนสุด
- เงาที่ offset เป็นศูนย์และมี blur จะได้เอฟเฟกต์เรืองแสง
- การซ้อน offset 1 px หลายชั้นจะได้ลุคแบบ 3D หรือ letterpress
ทำงานในเบราว์เซอร์ของคุณทั้งหมด — ข้อมูลที่คุณป้อนจะไม่ถูกอัปโหลดหรือจัดเก็บ
คำถามที่พบบ่อย
ใส่เงาให้ตัวอักษรใน CSS อย่างไร?
ใช้ text-shadow เช่น text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
ทำตัวอักษรเรืองแสงอย่างไร?
ใช้ offset เป็นศูนย์ ใส่ blur และสีสว่าง เช่น text-shadow: 0 0 8px #1db954; แล้วซ้อนหลายชั้นเพื่อให้เรืองแสงชัดขึ้น
ใช้ text-shadow มากกว่าหนึ่งชั้นได้ไหม?
ได้ คั่นเงาแต่ละชั้นด้วยคอมมา เครื่องมือนี้จะเพิ่มแต่ละชั้นให้คุณ
text-shadow มีผลต่อความอ่านง่ายไหม?
เงาบางๆ ช่วยให้อ่านข้อความบนรูปภาพได้ง่ายขึ้น แต่เงาหนักเกินไปจะทำให้ไม่คมชัด ควรตรวจคอนทราสต์ด้วยเครื่องมือตรวจคอนทราสต์