เพื่อเพิ่มเอฟเฟกต์เบลอให้เงา ให้ใช้คุณสมบัติ box-shadow โดยระบุค่ารัศมีเบลอ (blur radius) เป็นค่าที่ 3
ตัวอย่างโค้ด
ลองรันโค้ดด้านล่างเพื่อเพิ่มเอฟเฟกต์เบลอ:
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
box-shadow: 10px 10px 7px green;
height: 50px;
background-color: yellow;
}
</style>
</head>
<body>
<h2>Heading Two</h2>
<p>หัวข้อนี้มีเงาเบลอ</p>
</body>
</html>
ไวยากรณ์ box-shadow: box-shadow: h-offset v-offset blur-radius color;
10px- เงาแนวนอน (ขวา)10px- เงาแนวตั้ง (ล่าง)7px- รัศมีเบลอ (blur radius) ค่ายิ่งมากยิ่งเบลอgreen- สีของเงา
สามารถเพิ่มค่าที่ 4 spread-radius เพื่อขยาย/หดขนาดเงาได้
