สีและการออกแบบ
โปรแกรมแก้ไข Box Shadow ขั้นสูง
Stack multiple shadows with live preview.
Layer 1
Layer 2
.card {
box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.12), 0px 16px 32px -8px rgba(0, 0, 0, 0.20);
}หมายเหตุจากบรรณาธิการ
Understanding · Real shadows aren't a single layer.
บทเชิงลึกนี้มีให้บริการเฉพาะภาษาอังกฤษในขณะนี้ เครื่องมือแปลงด้านบนทำงานในภาษาของคุณ บทความอธิบายแบบยาวยังไม่ได้แปล
คำถามที่พบบ่อย
Quick answers.
›How do I create a realistic shadow?
Layering multiple shadows is key. Start with a tight, dark shadow for the base and stack a second, softer shadow with a larger blur and lower opacity for the ambient glow.
›What is the difference between blur and spread?
Blur softens the edges of the shadow using a Gaussian algorithm. Spread increases or decreases the physical size of the shadow source before the blur is applied.
›Does this support inset shadows?
Yes. Each layer can be toggled to `inset`, which places the shadow inside the element's frame to create a sunken or pressed effect.
›Is the CSS compatible with all browsers?
The generated `box-shadow` property is supported by all modern browsers. For very old versions of Safari or Firefox, you may need to add `-webkit-` or `-moz-` prefixes manually.
ผู้คนยังค้นหา
เครื่องมือที่เกี่ยวข้อง
More in this room.
- ตัวสร้าง Box Shadowตัวแก้ไข CSS box-shadow แบบภาพ
- ตัวสร้าง Gradientสร้าง CSS gradient แบบ linear, radial และ conic
- ตัวสร้าง Border Radiusตัวแก้ไข CSS border-radius แยกแต่ละมุม
- ตัวแก้ไข Cubic Bezierออกแบบเส้นโค้ง Easing ของ CSS ด้วยภาพ
- ตัวสร้างแอนิเมชั่น CSSสร้างคีย์เฟรมด้วยสายตา คัดลอก CSS ที่พร้อมใช้
- ตัวสร้างตัวกรอง CSSดูตัวอย่างสด blur, brightness, hue-rotate และอื่นๆ