CSS Box Shadow Generator
Trình tạo hiệu ứng đổ bóng CSS box-shadow trực quan, hỗ trợ hiệu ứng bóng mờ đa tầng mềm mại, bóng chìm Inset và sao chép mã Tailwind CSS.
Thông số đầu vào
Kết Quả Tức Thì
Chi tiết
Lời giải
Configured base spatial offsets: Horizontal (X) = 0px, Vertical (Y) = 12px
Set shadow diffusion: Blur Radius = 30px, Spread Radius = -6px
Formatted color transparency and inset mode: rgba(0, 0, 0, 0.08) (Drop Outer)
Synthesized 2 layer(s) into W3C CSS rule: box-shadow: 0px 5px 11px -3px rgba(0, 0, 0, 0.04), 0px 12px 30px -6px rgba(0, 0, 0, 0.048);
Giải Đáp Nhanh & Ý Nghĩa Chỉ Số
Công cụ CSS Box Shadow Generator giúp bạn tạo nhanh các khai báo thuộc tính `box-shadow` đẹp mắt với hiệu ứng đổ bóng đa tầng mềm mại (Smooth Elevation), bóng chìm Inset và lớp tiện ích Tailwind CSS cho giao diện website trong 0ms.
Các Thông Số CSS Box-Shadow Cốt Lõi
- Độ Lệch Ngang (X Offset): Dịch chuyển bóng theo trục ngang (giá trị dương đổ bóng sang phải, giá trị âm đổ bóng sang trái).
- Độ Lệch Dọc (Y Offset): Dịch chuyển bóng theo trục dọc (giá trị dương đổ bóng xuống dưới, mô phỏng ánh sáng từ trên chiếu xuống).
- Bán Kính Mờ (Blur Radius): Độ khuếch tán mờ của bóng (giá trị càng lớn thì bóng càng mềm và lan tỏa rộng).
- Bán Kính Lan (Spread Radius): Thu hẹp hoặc mở rộng chu vi bóng (giá trị âm giúp triệt tiêu viền đen gắt xung quanh thẻ).
- Đổ Bóng Đa Tầng (Elevation Layers): Xếp chồng từ 2 đến 4 lớp bóng mờ với độ trong suốt lũy thừa để tạo chiều sâu tự nhiên như phong cách Stripe hay Apple.
Ứng Dụng Trong Thiết Kế Web
- Thiết Kế Thẻ Card & Hộp Thoại Modal: Tạo hiệu ứng thẻ nổi bồng bềnh mềm mại chuẩn xu hướng UI/UX hiện đại.
- Nút Bấm Neumorphism & Form Nhập Liệu: Tạo hiệu ứng nút bấm bị nhấn chìm hoặc ô nhập văn bản lõm bằng chế độ
inset.
Kéo các thanh trượt phía trên để xem trước hiệu ứng trực quan và sao chép mã CSS / Tailwind CSS tức thì.
Công thức & Cơ chế tính toán
Công thức toán họcCấu trúc cú pháp:
- Áp dụng tọa độ X, Y, độ mờ Blur, độ lan Spread và mã màu trong suốt RGBA theo đúng đặc tả kỹ thuật W3C.
Hướng dẫn từng bước
Tùy Chỉnh Hướng Đổ Bóng
Sử dụng thanh trượt X và Y để điều chỉnh hướng chiếu của nguồn sáng.
Căn Chỉnh Độ Mờ & Độ Lan
Tăng Blur Radius để bóng mềm mại hơn và dùng Spread âm để tránh làm thô viền thẻ.
Chọn Màu Sắc & Số Lớp Đổ Bóng
Nhập mã màu trong suốt RGBA và chọn số lớp bóng (1 lớp sắc nét hoặc 2-4 lớp mịn màng).
Sao Chép Mã CSS & Tailwind
Nhấn 1-Click Copy để lấy mã thuộc tính CSS hoặc class Tailwind CSS dán vào dự án.
Bảng ví dụ minh họa
| Ví dụ | Giá trị đầu vào | Kết quả tính | Giải thích chi tiết |
|---|---|---|---|
| Đổ bóng thẻ nổi mềm mại phong cách Tailwind | Xếp chồng 2 lớp bóng tinh tế giúp tạo chiều sâu không gian tự nhiên mà không bị gắt viền. | ||
| Neumorphic Soft Inset Shadow | Hệ thống tự động tính toán đối soát tức thì theo các thông số thực nghiệm chuẩn mực. |
Câu hỏi thường gặp
Phương Pháp Luận Khoa Học & Nguồn Dữ Liệu Đối Chiếu
Tổ Chức Tiêu Chuẩn Web W3C - Đặc Tả Kỹ Thuật CSS Box Shadows
Mạng Lưới Nhà Phát Triển Mozilla (MDN) - Hướng Dẫn CSS box-shadow
Chuẩn quy chiếu: Tiêu chuẩn kỹ thuật quy chuẩn ISO / W3C / IETF
Công thức: box-shadow: [inset] X Y Blur Spread Color
Ngày kiểm duyệt: 21 Tháng 8, 2026
Cơ quan ban hành: Tổ Chức Tiêu Chuẩn Web W3C - Đặc Tả Kỹ Thuật CSS Box Shadows
Tài liệu đối chiếu: Mạng Lưới Nhà Phát Triển Mozilla (MDN) - Hướng Dẫn CSS box-shadow
Bảo mật & Tính toán: 100% xử lý tức thì trên thiết bị, không lưu dữ liệu cá nhân
Kết quả tính toán được mô phỏng theo các công thức quy chuẩn toán học và khoa học. Vui lòng đối soát với tài liệu kỹ thuật chuyên ngành khi áp dụng vào các dự án chuyên sâu.
Công Cụ, Phương Pháp Luận & Bài Viết Cùng Chủ Đề
Kết nối kiến thức đa chiều, công cụ tính toán kiểm chứng và tài liệu phương pháp luận khoa học.
Công Cụ & Máy Tính Cùng Chuyên Mục
Khám phá các công cụ tính toán và bộ chuyển đổi chuyên sâu chuẩn xác cùng lĩnh vực.
Kiểm Tra Tương Phản Màu
Đo tỷ lệ tương phản màu sắc chữ và nền theo tiêu chuẩn tiếp cận W3C WCAG 2.1.
Đổi Mã Màu RGB Sang HEX
Chuyển đổi các giá trị màu RGB (Đỏ, Lục, Lam) sang mã màu thập lục phân HEX (#RRGGBB) chuẩn thiết kế đồ họa và lập trình web.
Đổi Mã Màu HEX Sang RGBA
Chuyển đổi mã màu thập lục phân HEX (#RRGGBB) sang định dạng CSS rgba(r, g, b, a) với thanh điều chỉnh độ trong suốt linh hoạt.
Tạo Mã QR Code Online
Tạo mã QR Code tùy chỉnh màu sắc, hỗ trợ xuất file ảnh PNG chất lượng cao và vector SVG in ấn không giới hạn thời gian.
Tính Tỷ Lệ Khung Hình
Tính tỷ lệ khung hình hiển thị và co giãn kích thước ảnh/video chuẩn tỷ lệ thuận.
Tạo CSS Gradient Online
Trình tạo dải chuyển sắc CSS Gradient trực tuyến hỗ trợ Linear, Radial, Conic với mã xuất tự động cho CSS và Tailwind CSS.
Phương Pháp Luận Khoa Học & Chuẩn Thẩm Định
Dẫn xuất toán học, cơ sở lý thuyết và tiêu chuẩn kỹ thuật điều chỉnh thuật toán này.
RFC 8259 JSON Grammar Specifications, AST Parsing & Auto-Fix Mechanics
Comparative Analysis of Bank Amortization Models & Debt Cash-Flow Optimization
Value-Added Tax (VAT) Calculation Mechanics & Multi-Tier Regime Analysis
Bài Viết Hướng Dẫn & Nghiên Cứu Chuyên Sâu
Cẩm nang hướng dẫn toàn diện, phân tích tình huống thực tế và ứng dụng chuyên sâu.
Chuyển Đổi YAML Sang JSON: Xử Lý Cú Pháp AST, Lỗi Type Coercion và Chuẩn RFC 8259
Hướng dẫn chuyển đổi YAML sang JSON chuẩn RFC 8259, giải mã token AST, khắc phục triệt để lỗi ép kiểu ngầm và chuẩn hóa pipeline CI/CD hạ tầng đám mây.
Tối Ưu Lịch Khấu Hao Nợ: Chiến Lược Niên Kim Cố Định vs Gốc Đều
Bóc tách bản chất lịch khấu hao, bẫy lãi suất dồn đầu kỳ và chiến lược trả nợ trước hạn để tiết kiệm tối đa chi phí vay vốn thực tế.
Làm Chủ Cách Tính VAT: Giá Gross vs Net, Khấu Trừ Thuế Đầu Vào và Tối Ưu Dòng Tiền Doanh Nghiệp
Nắm vững cơ chế thuế VAT: công thức tính ngược Gross sang Net, quy trình khấu trừ thuế đầu vào và chuẩn mực quản trị dòng tiền doanh nghiệp hiệu quả.
Kết quả tính toán được mô phỏng theo các công thức quy chuẩn toán học và khoa học. Vui lòng đối soát với tài liệu kỹ thuật chuyên ngành khi áp dụng vào các dự án chuyên sâu.