Trình Tạo CSS Box Shadow là gì?
Trình Tạo CSS Box Shadow là một công cụ trực quan giúp bạn tạo các hiệu ứng CSS box-shadow mà không cần phải nhớ cú pháp. Thay vì viết các giá trị bóng bằng tay, bạn sử dụng các thanh trượt và điều khiển trực quan để thiết kế bóng hoàn hảo, sau đó sao chép mã CSS được tạo trực tiếp vào dự án của bạn.
box-shadow chấp nhận nhiều giá trị theo một thứ tự cụ thể: độ dịch chuyển ngang, độ dịch chuyển dọc, bán kính mờ, bán kính lan rộng và màu sắc. Việc tìm ra sự kết hợp phù hợp có thể khó khăn, đặc biệt là khi xếp chồng nhiều bóng để tạo hiệu ứng chân thực. Công cụ này cung cấp cho bạn phản hồi trực quan tức thì khi bạn điều chỉnh từng tham số.Những Điểm Nổi Bật Chính
Nhiều Lớp Bóng
Xếp chồng tối đa 10 lớp bóng độc lập để tạo ra các hiệu ứng phức tạp, chân thực với chiều sâu và kích thước.
Các Preset Có Sẵn
Bắt đầu từ các bóng được thiết kế chuyên nghiệp như Elevated, Neumorphism hoặc các kiểu Material Design.
Kiểm Soát Toàn Diện
Tinh chỉnh độ dịch chuyển, mờ, lan rộng, màu sắc, độ mờ và inset cho từng lớp với độ chính xác cao.
Xem Trước Trực Tiếp
Xem các thay đổi ngay lập tức khi bạn điều chỉnh bất kỳ giá trị nào, với phản hồi trực quan theo thời gian thực.
Cách Sử Dụng
Làm theo các bước đơn giản này để tạo các hiệu ứng bóng chuyên nghiệp trong vài phút:
Điều Chỉnh Các Điều Khiển Bóng
Sử dụng các thanh trượt hoặc nhập các giá trị trực tiếp để cấu hình các thuộc tính bóng của bạn:
- Offset X — Di chuyển bóng sang trái (-) hoặc sang phải (+)
- Offset Y — Di chuyển bóng lên (-) hoặc xuống (+)
- Blur — Kiểm soát độ mềm của cạnh bóng (0 = sắc nét)
- Spread — Mở rộng (+) hoặc thu nhỏ (-) kích thước bóng
- Màu Sắc & Độ Mờ — Chọn màu bóng và điều chỉnh độ trong suốt của nó
- Inset — Bật để tạo bóng bên trong thay vì bóng bên ngoài
Thêm Nhiều Lớp (Tùy Chọn)
Nhấp vào nút + để thêm các lớp bóng bổ sung. Mỗi lớp có các điều khiển độc lập. Nhấp vào một lớp trong danh sách để chọn nó và sửa đổi các giá trị của nó. Sử dụng biểu tượng mắt để hiển thị/ẩn các lớp riêng lẻ.
Thử Các Preset (Tùy Chọn)
Duyệt lưới preset ở dưới cùng của bảng điều khiển. Nhấp vào bất kỳ preset nào để áp dụng nó ngay lập tức. Sau đó, bạn có thể tùy chỉnh thêm các giá trị để phù hợp với thiết kế của bạn.
Tùy Chỉnh Xem Trước
Kiểm tra bóng của bạn trên các nền khác nhau bằng cách thay đổi các màu Nền và Phần Tử. Chuyển đổi giữa các hình dạng Rounded, Square và Circle để xem bóng trông như thế nào trên các phần tử khác nhau.
Sao Chép CSS
Khi hài lòng, nhấp vào nút Sao Chép phía trên đầu ra mã. Thuộc tính CSS box-shadow hoàn chỉnh được sao chép vào clipboard của bạn, sẵn sàng dán vào bảng kiểu của bạn.
Các Tính Năng
Các Điều Khiển Bóng Trực Quan
Mỗi thuộc tính bóng có một thanh trượt chuyên dụng với đầu vào số được đồng bộ hóa. Kéo thanh trượt để điều chỉnh nhanh hoặc nhập các giá trị chính xác để có độ chính xác cao. Các thay đổi được phản ánh trong xem trước ngay lập tức.
Nhiều Lớp Bóng
Bóng trong thế giới thực hiếm khi chỉ là một lớp. Công cụ này cho phép bạn xếp chồng tối đa 10 lớp bóng, mỗi lớp có các cài đặt độc lập. Kết hợp các bóng tinh tế và mạnh mẽ để đạt được chiều sâu trông tự nhiên và bóng bẩy.
Bóng Phẳng
- Vẻ ngoài một chiều
- Trông giả tạo
- Nhận thức chiều sâu hạn chế
- Ít chân thực hơn
Bóng Chân Thực
- Chiều sâu và kích thước tự nhiên
- Vẻ ngoài chuyên nghiệp
- Gradient mịn
- Độ cao giống như cuộc sống
Các Preset Bóng
Chọn từ 9 preset được thiết kế cẩn thận để bắt đầu nhanh chóng:
Subtle
Elevated
Strong
Soft
Neon
Inset
Neumorphism
Material
Float
Tùy Chỉnh Xem Trước
Thay đổi màu nền xem trước và màu phần tử để kiểm tra bóng của bạn trên các bề mặt khác nhau. Chuyển đổi giữa các hình dạng bo tròn, vuông và tròn để phù hợp với các phần tử giao diện người dùng thực tế của bạn.
Màu Nền
Kiểm tra bóng trên nền sáng, tối hoặc tùy chỉnh
Màu Phần Tử
Điều chỉnh màu phần tử để phù hợp với hệ thống thiết kế của bạn
Tùy Chọn Hình Dạng
Xem trước trên các phần tử bo tròn, vuông hoặc tròn
Đầu Ra CSS Trực Tiếp
Mã CSS được tạo được cập nhật theo thời gian thực khi bạn thực hiện các thay đổi. Sao chép nó bằng một cú nhấp chuột và dán trực tiếp vào dự án của bạn.
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1),
0 2px 4px rgba(0, 0, 0, 0.06);Các Câu Hỏi Thường Gặp
Thuộc tính CSS box-shadow là gì?
box-shadow là một thuộc tính CSS thêm các hiệu ứng bóng xung quanh một phần tử. Nó chấp nhận các giá trị cho độ dịch chuyển ngang, độ dịch chuyển dọc, bán kính mờ, bán kính lan rộng và màu sắc. Nhiều bóng có thể được phân tách bằng dấu phẩy.
box-shadow: offset-x offset-y blur-radius spread-radius color;Tại sao bóng của tôi trông phẳng và không chân thực?
Bóng một lớp với độ mờ cao có xu hướng trông giả tạo. Để có kết quả chân thực hơn, hãy sử dụng nhiều lớp với độ mờ thấp (10-25%) và tránh đen thuần chất. Các preset "Soft" và "Elevated" minh họa kỹ thuật này.
Tùy chọn Inset làm gì?
Tùy chọn Inset thay đổi bóng từ bóng bên ngoài (mặc định) thành bóng bên trong. Bóng bên trong tạo hiệu ứng nhấn hoặc lõm, thường được sử dụng cho các trường nhập và trạng thái tương tác.
- Bóng bên ngoài: Tạo độ cao và chiều sâu
- Bóng bên trong: Tạo hiệu ứng nhấn hoặc khắc
Tôi có thể thêm bao nhiêu lớp bóng?
Bạn có thể thêm tối đa 10 lớp bóng. Mỗi lớp có các điều khiển độc lập cho độ dịch chuyển, mờ, lan rộng, màu sắc, độ mờ và inset. Bạn cũng có thể bật/tắt khả năng hiển thị của các lớp riêng lẻ.
Tôi có thể sử dụng bóng màu sắc thay vì đen không?
Có. Trên thực tế, bóng màu sắc thường trông tốt hơn những bóng đen. Sử dụng bộ chọn màu để chọn một màu bóng phù hợp hoặc bổ sung cho bảng màu thiết kế của bạn. Preset "Neon" là một ví dụ tuyệt vời về bóng màu sắc.
- Sử dụng màu thương hiệu cho bóng được đánh dấu tinh tế
- Sử dụng màu bổ sung cho các hiệu ứng phát sáng sống động
- Sử dụng xanh đậm hoặc tím thay vì đen thuần chất cho bóng mềm hơn
CSS được tạo có tương thích với tất cả các trình duyệt không?
Thuộc tính box-shadow được hỗ trợ bởi tất cả các trình duyệt hiện đại bao gồm Chrome, Firefox, Safari và Edge. Không cần tiền tố nhà cung cấp.
Chưa có bình luận nào. Hãy là người đầu tiên!