CSS3 cung cấp hiệu ứng tạo bóng đến văn bản và các phần tử. Hai thuộc tính cơ bản là:
- text-shadow
- box-shadow
Trình duyệt hỗ trợ
| Chrome | IE/Edge | Firefox | Safari | Opera | |
| text-shadow | 4.0 | 10.0 | 3.5 | 4.0 | 9.5 |
| box-shadow | 10.0 4.0 -webkit- |
9.0 | 4.0 3.5 -moz- |
5.1 3.1 -webkit- |
10.5 |
Các trình duyệt Chrome, Firefox, Safari có sử dụng tiền tố (prefix) như –webkit-, –moz-. Các số đứng trước các tiền tố là phiên bản bắt đầu của trình duyệt có sử dụng tiền tố, ví dụ trong Chrome và thuộc tính box-shadow có 4.0-webkit– nghĩa là kể từ phiên bản Chrome 4.0 sử dụng –webkit-box-shadow.
Ví dụ text-shadow:
h1 {
text-shadow: 2px 2px;
}
<h1>Text-shadow effect!</h1>
Kết quả:
Ví dụ box-shadow:
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: yellow;
box-shadow: 10px 10px;
}
<div>This is a div element with a box-shadow</div>
Kết quả:
(Tham khảo thêm về shadow effects tại
Trần Ngọc Minh 