สร้างเงาข้อความ CSS

เกี่ยวกับเครื่องมือนี้

เครื่องมือสร้างเงาข้อความ CSS ช่วยให้คุณสร้างเงาข้อความหลายชั้นแบบเห็นภาพและรับผลลัพธ์ CSS ได้ทันที แต่ละเลเยอร์มีตัวควบคุมอิสระสำหรับออฟเซ็ต X/Y รัศมีเบลอ สี และความทึบ

ความทึบถูกใช้เป็นช่องสัญญาณอัลฟา RGBA ให้ความโปร่งใสที่นุ่มนวลโดยไม่ต้องใช้เทคนิคเฉพาะของเบราว์เซอร์ CSS ที่สร้างทำงานในเบราว์เซอร์สมัยใหม่ทั้งหมด

วิธีใช้งาน

1. เลือกค่าที่ตั้งไว้ล่วงหน้าเพื่อเริ่มต้น หรือกำหนดค่าเลเยอร์ด้วยตนเอง
2. พิมพ์ข้อความตัวอย่างและปรับขนาดตัวอักษรและสี
3. เพิ่มเลเยอร์เพิ่มเติมด้วย + เพิ่มเลเยอร์สำหรับเอฟเฟกต์ที่ซับซ้อน
4. คลิกคัดลอก CSS เพื่อคัดลอกคำสั่ง text-shadow ลงใน stylesheet โดยตรง

กรณีการใช้งาน

นักพัฒนาฟรอนต์เอนด์สร้างหัวเรื่องส่วน hero ที่มีความลึก นักออกแบบสร้างต้นแบบเอฟเฟกต์ข้อความใน CSS ทีมการตลาดสร้างข้อความ CTA ที่โดดเด่นด้วยเอฟเฟกต์เรืองแสงและนีออน

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

• ฉันสามารถเพิ่มเลเยอร์ได้กี่ชั้น? — ไม่มีขีดจำกัด CSS รองรับค่า text-shadow ที่คั่นด้วยจุลภาคได้ทุกจำนวน ในทางปฏิบัติ 1-4 เลเยอร์ครอบคลุมเอฟเฟกต์ส่วนใหญ่
• text-shadow ทำงานในทุกเบราว์เซอร์หรือไม่? — ใช่ text-shadow ได้รับการรองรับอย่างสมบูรณ์ในทุกเบราว์เซอร์สมัยใหม่ตั้งแต่ปี 2012
• รัศมีเบลอ 0 คืออะไร? — เงาขอบคมโดยไม่มีเบลอ มีประโยชน์สำหรับเอฟเฟกต์เรโทรหรือเส้นขอบ