สร้าง CSS box-shadow และคัดลอกโค้ดอย่างไร

ปรับแถบเลื่อนสำหรับระยะ x และ y, ความเบลอ, การกระจาย, สี และความทึบ พร้อมดูตัวอย่างสด จากนั้นกด คัดลอก ในส่วนผลลัพธ์ CSS คุณยังสามารถเริ่มจาก ค่าสำเร็จรูป เช่น นุ่มนวล, เรืองแสง หรือ Material 8 ได้อีกด้วย

ฉันสามารถซ้อนเงาหลายชั้นในองค์ประกอบเดียวได้ไหม

ได้ กด + เพิ่มเลเยอร์เงา เพื่อเพิ่มเลเยอร์ จากนั้นจัดลำดับใหม่ ซ่อน หรือ ลบ แต่ละเลเยอร์ได้ เลเยอร์ต่างๆ จะถูกรวมเข้าด้วยกันด้วยเครื่องหมายจุลภาคในค่า box-shadow เดียว

สร้างเงาด้านในอย่างไร

เลือกเลเยอร์แล้วเปิด เงาด้านใน หรือโหลดค่าสำเร็จรูป ฝังใน ผลลัพธ์จะรวมคีย์เวิร์ด inset สำหรับเลเยอร์นั้น

ขอเป็นคลาส Tailwind แทน CSS ธรรมดาได้ไหม

ได้ นอกจากประกาศ CSS แล้ว เครื่องมือยังแสดงผลคลาสค่ากำหนดเองของ Tailwind ในรูปแบบ shadow-[...] โดยแทนที่ช่องว่างด้วยขีดล่าง พร้อมวางลงในมาร์กอัปของคุณ

มีวิธีตั้งตำแหน่งเงาที่ง่ายกว่าใช้แถบเลื่อนไหม

มี ลากกล่องตัวอย่างเพื่อย้ายเงาของเลเยอร์ที่ใช้งานอยู่ และกด Shift ค้างไว้เพื่อควบคุมอย่างละเอียด คุณยังสามารถเปลี่ยน พื้นหลังตัวอย่าง และ สีกล่อง เพื่อดูว่าเงาดูเป็นอย่างไรบนดีไซน์ของคุณ

ฟรีจริงหรือ

ใช่ ทุกเครื่องมือใช้งานได้ฟรี ไม่ต้องมีบัญชีและไม่ต้องใช้บัตรเครดิต การทำงานเกิดขึ้นบนอุปกรณ์ของคุณแทนที่จะเป็นเซิร์ฟเวอร์ของเรา ซึ่งเป็นสิ่งที่ทำให้ใช้งานได้ฟรี

ใช้งานได้บนมือถือหรือไม่?

ได้ ใช้งานได้บนเบราว์เซอร์มือถือรุ่นปัจจุบันทั้ง iOS และ Android โดยไม่ต้องติดตั้งอะไร

🎨

สร้าง CSS Box Shadow ฟรี

ตัวสร้าง CSS box-shadow แบบ visual พร้อมตัวอย่างสดๆ การซ้อนหลายชั้น color picker สลับ inset และคัดลอกในคลิกเดียว มี preset ของ Material, neumorphism และ glow

ทำงานในเบราว์เซอร์ไม่ต้องสมัคร ไม่มีป๊อปอัปไม่ต้องเข้าสู่ระบบฟรีตลอดไป

ใช้งานได้แบบออฟไลน์เมื่อโหลดแล้ว

พื้นหลังตัวอย่าง

ลากกล่องเพื่อวางตำแหน่งเงาของชั้นที่ใช้งาน - กด Shift ค้างไว้เพื่อควบคุมอย่างละเอียด

box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);

ค่าสำเร็จรูป

สีกล่อง

ความโค้งมุม (16px)

x (0px)

y (4px)

เบลอ (12px)

กระจาย (0px)

สี

ความทึบ (15%)

เงาด้านใน

การใช้งานทั่วไป

เงา Card UIสร้างเงาการ์ดที่สวยงามสำหรับแดชบอร์ดและตารางสินค้า
ปุ่มผลกระทบการแสดงสร้างเงาปุ่มที่เลียนแบบความลึกของโลกแห่งความจริงและสถานะการกดดัน
Neumorphism Soft UIสร้างลักษณะ soft-UI neumorphism พร้อมเงาสว่าง + มืดที่จับคู่
เงา Modal และ Popoverสร้างความรู้สึกเพิ่มเติม ลอยสำหรับกล่องโต้ตอบและเมนูแบบเลื่อนลง
เอฟเฟกต์แสงจ้าและวงแหวนโฟกัสสร้างเอฟเฟกต์การเน้นแสงจ้า วงแหวนโฟกัส และไฮไลต์สไตล์เนออน

วิธีการทำงาน

ตัวสร้าง box-shadow เป็นเครื่องมือ React ฝั่งไคลเอนต์ทั้งหมด — ไม่มีเซิร์ฟเวอร์ ไม่มีไลบรารี เก็บรายการออบเจกต์เลเยอร์เงาไว้ใน state ประกอบสตริง CSS box-shadow ที่ถูกต้องทุกครั้งที่เปลี่ยนด้วยตัวจัดรูปแบบ rgba() ที่เขียนขึ้นเอง และใช้กับองค์ประกอบตัวอย่างโดยตรงผ่าน style prop ของ React เอนจินเรนเดอร์ของเบราว์เซอร์จึงวาดผลลัพธ์ทันที

1
พารามิเตอร์เลเยอร์ป้อนเข้าตัวจัดรูปแบบ
แต่ละเลเยอร์เงาเก็บค่าชดเชย x/y ความเบลอ การกระจาย สีแบบ hex และค่าความทึบ ทุกครั้งที่เปลี่ยน ฟังก์ชัน shadowToCss ขนาดเล็กจะแปลงสี hex เป็นส่วนประกอบ RGB ด้วย regex แล้วประกอบสตริง rgba() — เช่น 0px 4px 12px 0px rgba(0, 0, 0, 0.15) เลเยอร์หลายชั้นเชื่อมด้วยจุลภาค
2
เบราว์เซอร์เรนเดอร์ตัวอย่างสด
สตริงที่ประกอบแล้วถูกกำหนดให้คุณสมบัติ style boxShadow ขององค์ประกอบ div ใน JSX โดยตรง React อัปเดตแอตทริบิวต์ DOM และเอนจิน CSS ของเบราว์เซอร์วาดเงาทันที — ไม่มี canvas หรือ WebGL มีแค่การเรนเดอร์ CSS แบบเนทีฟ
3
ลากเพื่อจัดตำแหน่งใช้ Pointer Events API
การคลิกและลากกล่องตัวอย่างจะเรียก setPointerCapture บนองค์ประกอบ แล้วติดตามค่าเปลี่ยนแปลงของ onPointerMove เพื่ออัปเดตค่าชดเชย x และ y ของเลเยอร์ที่ใช้งานแบบเรียลไทม์ การกด Shift ค้างไว้จะใช้ตัวคูณ 0.25x สำหรับการจัดตำแหน่งอย่างละเอียด
4
ผลลัพธ์ถูกคัดลอกไปยังคลิปบอร์ด
เครื่องมือสร้างผลลัพธ์สองรูปแบบจากข้อมูลเลเยอร์เดียวกัน: การประกาศ CSS box-shadow มาตรฐาน และคลาส Tailwind แบบค่ากำหนดเอง (shadow-[...]) ซึ่งช่องว่างถูกแทนด้วยขีดล่างตามกฎไวยากรณ์ของ Tailwind การคัดลอกคลิกเดียวใช้ navigator.clipboard.writeText