CSS Box Shadow Generator

Tạo hiệu ứng đổ bóng CSS đẹp mắt với xem trước thời gian thực. Tạo hiệu ứng bóng tùy chỉnh với nhiều lớp, màu sắc và hướng khác nhau để tạo chiều sâu thị giác tuyệt đẹp.

Xem Trước

Bóng Đẹp Mắt

Hiệu ứng bóng tuyệt vời hoạt động

CSS Được Tạo
box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.1);
Mẫu Bóng Có Sẵn
Điều Khiển Bóng
Lớp Bóng 1
Cách Sử Dụng

Sao chép CSS được tạo và áp dụng vào các phần tử HTML của bạn:

Ví Dụ HTML

<div class="shadow-element">
  <h1>Your Content Here</h1>
</div>

<style>
.shadow-element {
  -webkit-box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.1);
box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.1);
  padding: 20px;
  border-radius: 8px;
  background: white;
}
</style>

Mẹo Hay

  • •Xếp chồng nhiều bóng để tạo hiệu ứng chiều sâu phức tạp
  • •Sử dụng bóng tinh tế cho thiết kế flat hiện đại
  • •Kết hợp blur và spread để tạo các kiểu bóng khác nhau
  • •Điều chỉnh độ mờ để tạo chuyển tiếp bóng mềm mại
  • •Sử dụng bóng trong cho hiệu ứng button bị nhấn

Tính Năng Nổi Bật

Xem trước thời gian thực

See your shadow changes instantly

Nhiều lớp bóng

Layer multiple shadows for complex effects

Bộ chọn màu nâng cao

Advanced color selection tools

Mẫu có sẵn

18+ professional shadow presets

Các tùy chọn xuất CSS

Export with vendor prefixes

Giao diện thân thiện mobile

Optimized for all devices

Hướng Dẫn Sử Dụng Chi Tiết

1

Chọn giữa loại bóng ngoài hoặc bóng trong

2

Điều chỉnh giá trị dịch chuyển ngang và dọc

3

Đặt bán kính blur cho độ mềm của bóng

4

Cấu hình bán kính spread cho kích thước bóng

5

Chọn màu bóng và độ mờ

6

Thêm nhiều lớp cho hiệu ứng phức tạp

7

Sử dụng preset cho kết quả chuyên nghiệp nhanh chóng

8

Sao chép CSS code và áp dụng vào elements của bạn

Chi Tiết Kỹ Thuật

Hỗ Trợ Trình Duyệt

CSS box-shadow được hỗ trợ rộng rãi trên tất cả các trình duyệt hiện đại:

Chrome 10+ (2011)
Firefox 4+ (2011)
Safari 5.1+ (2011)
Edge 12+ (2015)
iOS Safari 5+ (2011)
Android Browser 4+ (2011)

Thuộc Tính CSS Được Sử Dụng

box-shadow để tạo hiệu ứng bóng
Nhiều giá trị phân cách bằng dấu phẩy cho bóng nhiều lớp
Từ khóa inset cho bóng trong
rgba() cho màu sắc với độ trong suốt
Vendor prefixes (-webkit-, -moz-) cho trình duyệt cũ

Cân Nhắc Hiệu Suất

CSS shadows sử dụng GPU acceleration
Tránh các giá trị blur quá cao trên mobile
Nhiều bóng có thể ảnh hưởng hiệu suất
Cân nhắc sử dụng pseudo-elements cho hiệu ứng phức tạp
Test trên các thiết bị yếu để tối ưu hiệu suất

Ứng Dụng Thực Tế

Thiết Kế Card

Tạo chiều sâu và thứ bậc với hiệu ứng bóng tinh tế trên cards và containers

Style Button

Thêm chiều sâu cho button với drop shadow và inner shadow cho trạng thái pressed

Hiệu Ứng Hình Ảnh

Nâng cao hình ảnh với hiệu ứng bóng chuyên nghiệp cho layout portfolio và gallery

Chiều Sâu Text

Tạo text shadow cho headers và titles để cải thiện khả năng đọc và tác động thị giác

Modal Dialogs

Sử dụng bóng ấn tượng để tách biệt nội dung modal khỏi các elements nền

Hiệu Ứng Hover

Animate các thuộc tính shadow cho trạng thái hover tương tác và micro-interactions

Câu Hỏi Thường Gặp

CSS Box Shadow là gì?

CSS box-shadow là một thuộc tính thêm hiệu ứng bóng xung quanh khung của một element. Bạn có thể đặt nhiều hiệu ứng phân cách bằng dấu phẩy và kiểm soát màu sắc, kích thước, độ mờ và vị trí của bóng.

Tôi có thể sử dụng nhiều bóng trên một element không?

Có! Bạn có thể xếp chồng nhiều bóng bằng cách phân cách chúng bằng dấu phẩy. Điều này cho phép tạo ra các hiệu ứng ánh sáng phức tạp và chiều sâu.

Sự khác biệt giữa bóng trong và bóng ngoài là gì?

Bóng ngoài xuất hiện bên ngoài element tạo hiệu ứng nổi lên, trong khi bóng trong (sử dụng 'inset') xuất hiện bên trong element tạo hiệu ứng chìm xuống hoặc bị nhấn.

Box shadow có ảnh hưởng đến hiệu suất không?

Các trình duyệt hiện đại xử lý box shadow hiệu quả với GPU acceleration. Tuy nhiên, blur quá mức hoặc nhiều bóng phức tạp có thể ảnh hưởng hiệu suất trên các thiết bị yếu.

Box shadow có được hỗ trợ trong tất cả trình duyệt không?

Box shadow có hỗ trợ trình duyệt xuất sắc từ năm 2011. Tool này bao gồm vendor prefixes để tương thích tối đa với các trình duyệt cũ.