Đơn giản hóa quy trình làm việc của bạn: Tìm kiếm miniwebtool.
Thêm
Trang chủ > Công cụ văn bản > Công cụ chỉnh sửa văn bản > Trình tạo Box Shadow CSS
 

Trình tạo Box Shadow CSS

Trình tạo box-shadow CSS trực tuyến miễn phí với bản xem trước trực tiếp. Chồng nhiều lớp bóng đổ, chọn từ các thiết lập sẵn có, chuyển đổi chế độ inset và sao chép mã nguồn ngay lập tức. Mọi quá trình xử lý đều diễn ra trong trình duyệt của bạn.

Trình tạo Box Shadow CSS
Ví dụ nhanh:
Xem trước trực tiếp
↕ Kéo để đặt độ lệch
Các lớp bóng đổ
Cài đặt lớp
Độ lệch X px
Độ lệch Y px
Độ mờ px
Lan tỏa px
Màu sắc
Độ mờ đục %
Bóng đổ bên trong (Inset)
Cài đặt sẵn chọn lọc
CSS đã tạo

Embed Trình tạo Box Shadow CSS Widget

Giới thiệu về Trình tạo Box Shadow CSS

Trình tạo Box Shadow CSS cho phép bạn thiết kế trực quan các hiệu ứng box-shadow và sao chép ngay lập tức mã CSS sẵn sàng cho sản phẩm. Xếp chồng nhiều lớp bóng, chọn từ các cài đặt sẵn được lấy cảm hứng từ Material Design, Tailwind CSS và Neumorphism, hoặc kéo trực tiếp trên bản xem trước để định vị bóng của bạn. Mọi thứ đều chạy trong trình duyệt của bạn — mã của bạn không bao giờ rời khỏi trang web.

Cách sử dụng Trình tạo Box Shadow CSS

  1. Điều chỉnh các nút điều khiển bóng — Sử dụng các thanh trượt để đặt độ lệch ngang (X), độ lệch dọc (Y), bán kính mờ và bán kính lan tỏa. Bạn cũng có thể kéo trực tiếp trên khu vực xem trước để định vị lại bóng một cách trực quan.
  2. Chọn màu sắc và độ mờ đục — Chọn màu bóng bằng trình chọn màu và tinh chỉnh độ trong suốt bằng thanh trượt độ mờ đục. Bản xem trước sẽ cập nhật theo thời gian thực.
  3. Thêm nhiều lớp hoặc cài đặt sẵn — Nhấp vào + Thêm lớp bóng đổ để xếp chồng các bóng tạo chiều sâu thực tế. Hoặc chọn một cài đặt sẵn (Material, Tailwind, Neumorphism, v.v.) để bắt đầu với một thiết kế đã được chứng minh.
  4. Sao chép mã CSS — Nhấp vào Sao chép để lấy mã box-shadow đã tạo và dán trực tiếp vào bảng kiểu của bạn.

Hiểu về cú pháp box-shadow

box-shadow: [inset] <offset-x> <offset-y> <blur-radius> <spread-radius> <color>;
offset-x / offset-y

Độ dịch chuyển ngang và dọc của bóng. Giá trị dương di chuyển sang phải/xuống; giá trị âm di chuyển sang trái/lên.

blur-radius

Kiểm soát mức độ mờ của bóng. 0 tạo ra cạnh sắc nét; các giá trị cao hơn tạo ra bóng mềm hơn, lan tỏa hơn.

spread-radius

Mở rộng hoặc thu hẹp bóng. Giá trị dương làm cho bóng lớn hơn; giá trị âm làm nó co lại, hữu ích cho các hiệu ứng bóng dưới phần tử nhẹ nhàng.

inset

Khi có từ khóa này, bóng sẽ được vẽ bên trong phần tử. Thường dùng cho các nút bị nhấn và các trường nhập liệu dạng lõm.

Mẹo để tạo Box Shadow chuyên nghiệp

Giải thích các phong cách bóng phổ biến

Câu hỏi thường gặp

Thuộc tính CSS box-shadow là gì?

Thuộc tính CSS box-shadow thêm hiệu ứng bóng đổ xung quanh khung của một phần tử. Nó chấp nhận các giá trị cho độ lệch ngang, độ lệch dọc, bán kính mờ, bán kính lan tỏa và màu sắc. Nhiều bóng đổ có thể được phân tách bằng dấu phẩy để tạo hiệu ứng chiều sâu phân lớp.

Làm cách nào để tạo nhiều box shadow trong CSS?

Nhiều box shadow được tạo bằng cách phân tách từng định nghĩa bóng bằng dấu phẩy. Ví dụ: box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1). Mỗi bóng được hiển thị chồng lên bóng trước đó, với bóng đầu tiên xuất hiện ở trên cùng.

Sự khác biệt giữa box-shadow và drop-shadow là gì?

box-shadow áp dụng bóng cho khung hình chữ nhật của phần tử, trong khi filter: drop-shadow() tuân theo hình dạng thực tế bao gồm cả các vùng trong suốt. box-shadow hỗ trợ bán kính lan tỏa và chế độ inset, những thứ mà drop-shadow không có. Đối với các phần tử hình chữ nhật tiêu chuẩn, box-shadow thường được sử dụng và có hiệu suất tốt hơn.

Bóng đổ bên trong (inset box shadow) là gì?

Một bóng đổ bên trong xuất hiện bên trong phần tử thay vì bên ngoài. Nó được tạo bằng cách thêm từ khóa inset trước các giá trị bóng. Bóng đổ inset thường được sử dụng cho các hiệu ứng nút bị nhấn, tạo kiểu trường nhập liệu và tạo giao diện lõm hoặc chạm khắc.

Các giá trị box-shadow nào tốt cho hiệu ứng thẻ (card) nhẹ nhàng?

Một kiểu bóng thẻ nhẹ nhàng phổ biến sử dụng hai lớp: 0 1px 3px rgba(0,0,0,0.12) cho bóng gần và 0 1px 2px rgba(0,0,0,0.24) để tạo độ nét. Tailwind CSS sử dụng 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1) cho tiện ích bóng mặc định của nó.

Tham khảo nội dung, trang hoặc công cụ này như sau:

"Trình tạo Box Shadow CSS" tại https://MiniWebtool.com/vi/trinh-tao-box-shadow-css/ từ MiniWebtool, https://MiniWebtool.com/

bởi đội ngũ miniwebtool. Cập nhật: 07-03-2026

Các công cụ liên quan khác:

Làm Đẹp CSSMới
Máy nén CSS

Công cụ chỉnh sửa văn bản:

Công cụ nổi bật:

Máy tính tuổiTrình Trích Xuất Ảnh từ VideoCông cụ đổi Pound sang KilogramCông cụ chuyển đổi kg sang lbsCông cụ Mã hóa CaesarCông cụ đếm hàngMáy tính giảm giá phần trămMáy tính thương và số dưXóa dấu cáchMáy tính phân số tối giảnTrình tạo chuỗi ngẫu nhiênTrình Tạo Mã MorseCông cụ chuyển đổi chữ số La MãTrình chuyển đổi HTML sang văn bảnMáy tính Phân tích Thừa số Nguyên tố🖱️ Bộ Đếm ClickĐảo ngược văn bảnTrình nhân hóa văn bản AI⏱️ Máy Tính GiờBộ chuyển đổi Nhị phân sang HexMáy tính nhị phânBộ chuyển đổi thập phân sang nhị phânĐây có phải là Số Nguyên Tố?Máy tính thập phân sang phân sốTrình tạo bài tây ngẫu nhiênTra cứu ID người dùng InstagramTrình tạo ngày sinh ngẫu nhiênMáy tính ngày trong năm - Hôm nay là ngày thứ mấy trong nămĐổ xúc xắc📅 Máy tính ngàyTrình tạo nhánh giải đấu ngẫu nhiênBộ Chuyển Đổi Số Sang ChữCông cụ loại bỏ dấu câu trực tuyếnmáy-tính-số-mũ-độ-chính-xác-caoTrình chuyển đổi SRT sang TXTSắp xếp sốCông cụ chuyển đổi nhị phân sang thập phânBộ chuyển đổi Feet và Inch sang CmTrình tạo oẳn tù tìTung đồng xuBộ chuyển đổi hex sang thập phânCon số may mắn của tôi là gì?Trình tạo số nguyên ngẫu nhiênMáy tính Kiểm tra Chia hếtMáy tính ModuloMáy tính HEXCông cụ chuyển đổi cm sang feet và inchSắp xếp theo thứ tự bảng chữ cáiTrình tạo mê cungSo sánh hai chuỗiCông cụ chia ảnhGhép VideoMáy tính thời gianCông cụ chuyển đổi thời gian phân sốCông cụ tạo nhóm ngẫu nhiênMáy tính căn bậc haiTrình phát hiện nội dung AIMáy tính So sánh Phân sốCông cụ chuyển đổi kPa sang psiMáy tính Cạnh huyềnBộ chuyển đổi FPSBộ Chuyển Đổi Nhị PhânCông Cụ Vẽ Đồ Thị Hệ Bất Phương TrìnhBộ lặp MP3Máy Tính Độ Lệch Chuẩn Tương ĐốiBộ chuyển đổi HEXMáy Tính Chu Vi Hình ElipCông cụ chuyển đổi gam sang poundBộ chuyển đổi Thập phân sang Thập lục phânMáy tính Phân phối PoissonParaphraser AITrình nén VideoTrình tạo tên ngẫu nhiênTrình trích xuất âm thanhĐiều chỉnh tốc độ videoMáy Tính Chữ Số Có NghĩaMáy tính Cung Mặt trời, Mặt trăng & Cung mọc 🌞🌙✨Tra cứu ID người dùng FacebookCông cụ chuyển đổi centimet sang inchDanh sách các số nguyên tốMáy tính nhânTrình Tạo Màu Ngẫu NhiênMáy tính trung bình mẫuBộ Chuyển Đổi Thời Gian Sang Thập PhânCông cụ chuyển đổi hệ thập lục phân sang nhị phânCông cụ cắt ảnhCông cụ tính điểm trung bình GPA⏰ Đồng Hồ Báo Thức Trực TuyếnChuyển đổi Thời gian SRT🔍 Kiểm tra Đạo vănKiểm Tra Số Chẵn Hay Số LẻCông cụ chuyển đổi Phần trăm sang PPMTrình tạo ngày ngẫu nhiêntra-cứu-địa-chỉ-MACAI Trình thêm dấu câuCông cụ xáo trộn chữ cái📷 OCR Chuyển Ảnh Thành Văn BảnTrình tải hình thu nhỏ YouTubeTrình tạo thẻ tín dụng ngẫu nhiênChuyển đổi Nhị phân sang Bát phânTrình Tạo Chủ Đề Tranh Luận Ngẫu NhiênTrình Tạo Tên Mèo Chó Ngẫu NhiênTrình Tạo Câu Kinh Thánh Ngẫu NhiênTrình Tạo Bài Toán Ngẫu NhiênTrình Tạo Đoạn Văn Ngẫu NhiênTrình Tạo Câu Tiếng Anh Ngẫu NhiênMáy Tính Sỏi, Cát và Đất MặtMáy Tính Trọng Lượng ThépMáy Tính Mô-men Xoắn Bu-lôngMáy Tính Dòng Chảy Trong ỐngMáy Tính Tải Trọng DầmBộ Chuyển Đổi Đô La Sang VàngMáy Tính Xác Suất Quyền ChọnMáy Tính Chia Tách Cổ PhiếuMáy tính ESPPMáy Tính Phí Trễ Hạn Hóa ĐơnMáy Tính Mức Lương Theo Giờ FreelancerMáy Tính Thuê vs MuaCông Cụ Chia Tiền Tip Nâng CaoTrình Tạo Danh Sách Hành LýMáy Tính Jet LagMáy Tính Ngân Sách Du LịchMáy Tính Khoảng Cách Chuyến BayMáy Tính Thất Thoát NhiệtMáy Tính Chi Phí Phát ĐiệnMáy Tính Lượng Nước Sử DụngMáy Tính Chi Phí Điện Năng Thiết Bị Gia DụngMáy Tính Kiểm Toán Năng Lượng Gia ĐìnhMáy Tính ROI Điện Mặt TrờiMáy Tính Tấm Pin Mặt TrờiMáy Tính Phân Ủ Tỷ Lệ C:NMáy Tính Phân Bón Cho Bãi CỏMáy Tính Ngày Sương GiáMáy Tính Đất Cho Luống NângMáy Tính Phân Bón NPKMáy Tính Tỷ Lệ Nảy Mầm Của Hạt GiốngMáy Tính Bitrate VideoCông cụ Chuyển Tone NhạcĐo BPM Bằng Cách Gõ NhịpCông cụ Ước tính Kích thước Tệp ẢnhMáy Tính Megapixel Sang Kích Thước InMáy tính Hệ số CropMáy tính Tam giác Phơi sángMáy Tính Khả Năng Kéo Rơ Moóc Của XeMáy Tính Leasing Ô TôMáy Tính 0–60 và Một Phần Tư DặmMáy Tính Thời Gian Sạc Xe ĐiệnMáy Tính Quãng Đường Xe ĐiệnMáy Tính Mức Tiêu Thụ Nhiên LiệuBộ Chuyển Đổi Kích Cỡ Quần ÁoTra cứu Kích thước GiấyTrình Chuyển đổi Kích cỡ NhẫnChuyển đổi Đơn vị Thiên vănBộ Chuyển Đổi Mức Tiêu Thụ Nhiên LiệuChuyển đổi Tốc độ Truyền dữ liệuChuyển Đổi Mô-men Xoắn (Nm, ft-lb, kgf-cm)Trình Tạo Văn Bản Gạch NgangCông cụ Hiển thị Khoảng trắngMáy Tính Thời Gian ĐọcMáy Tính Thời Gian NóiĐếm Đoạn VănBộ Đếm CâuMáy Đếm Âm TiếtBộ Chuyển Đổi Văn Bản Sang Nhị Phân/Hex/ASCIITrình Tạo Ảnh Placeholder / Lorem PicsumTrình tạo Tệp .envTrình Tạo Lệnh GitChuyển Đổi Mã Màu Mọi Định DạngTrình Tạo và Kiểm Tra Bcrypt HashTrình Tạo JWTTrình tạo CSS GridMáy Tính Tích Phân SốMáy Tính Biến Đổi ZMáy tính Biến đổi Fourier Nhanh (FFT)Máy Tính Tích TensorMáy Tính Hàm Mũ Ma TrậnMáy Tính Dạng Chuẩn JordanMáy tính Vành và TrườngMáy Tính Bậc Lý Thuyết NhómGiải Hệ Phương Trình Vi Phân ThườngMáy Giải Phương Trình Vi Phân BernoulliMáy Tính Phương Pháp EulerCông cụ Vẽ Trường Hướng và Trường Độ dốcTrình Giải Phương Trình Vi Phân Thường Cấp HaiTrình Giải Phương Trình Vi Phân Thường Cấp MộtTrình giải Bài toán Hôn nhân Ổn địnhMáy Tính Luồng Mạng (Luồng Cực Đại)Trình Kiểm Tra Đồ Thị PhẳngCông cụ Kiểm tra Đường đi HamiltonTrình Giải Bài Toán Người Du Hành (TSP)Công cụ Giải Quy hoạch Tuyến tínhMáy tính Bao hàm - Loại trừMáy Giải Hệ Thức Truy HồiMáy Tính Ma Trận KềMáy Tính Sắp Xếp TopoMáy Tính Tô Màu Đồ ThịTrình Mô Phỏng Cổng LogicCông cụ Giải Bản đồ Karnaugh (K-Map)Công Cụ Rút Gọn Đại Số BooleanMáy Tính Hàm Phân HoạchMáy Tính Gốc SốKiểm tra Số FibonacciMáy Tính Phân Số Ai CậpMáy Tính Hàm MöbiusCông cụ Xác minh Phỏng đoán GoldbachCông cụ Kiểm tra Số nguyên tố MersenneCông cụ Tìm Số Nguyên Tố Sinh ĐôiKiểm tra Số Thân ThiếtKiểm tra Số Hoàn hảoMáy Tính Lũy Thừa ModularMáy tính Hoán vị Có lặpMáy Tính Kích Thước Hiệu ỨngMáy Tính Rủi Ro Tương ĐốiMáy Tính Tỷ Số OddsMáy Tính Bảng ChéoMáy tính Kiểm định Chính xác FisherMáy Tính Tương Quan Hạng SpearmanMáy Tính Phân Phối BetaMáy Tính Phân Phối WeibullMáy Tính Phân Phối MũMáy tính Phân phối Hình họcMáy Tính Phân Phối Nhị Thức ÂmMáy Tính Phân Phối Siêu BộiMáy tính Kiểm định F và Phân phối FMáy tính Định lý BayesMáy Tính Đa Thức Đặc TrưngMáy Tính Lũy Thừa Ma TrậnMáy Tính Phân Rã CholeskyMáy Tính Phân Tích QRMáy Tính Chéo Hóa Ma TrậnMáy tính Quy tắc CramerMáy Tính Không Gian CộtMáy Tính Không Gian NullMáy Tính Góc Giữa Các VectoMáy Tính Vecto Đơn VịMáy Tính Độ Lớn VectoMáy Tính Tích Có HướngMáy Tính Tích Vô HướngMáy Tính Nhân Ma TrậnMáy Tính Ma Trận Nghịch ĐảoMáy tính RREF (Dạng Bậc Thang Rút Gọn)Máy tính Phương pháp NewtonMáy Tính Ma Trận JacobianMáy Tính Tích Phân MặtMáy Tính Tích Phân ĐườngMáy Tính cURLMáy tính DivergenceMáy Tính Gradient Đa BiếnMáy Tính Tối Ưu Hóa Giải TíchMáy Giải Tỷ Lệ Liên QuanMáy Tính Tốc Độ Thay Đổi Tức ThờiMáy Tính Tốc Độ Thay Đổi Trung BìnhMáy Tính Tổng Chuỗi Vô HạnMáy tính Kiểm tra Hội tụ ChuỗiMáy Tính Chuỗi Lũy ThừaMáy Tính Chuỗi MaclaurinMáy tính Quy tắc L'HôpitalMáy Tính Tích Phân Suy RộngMáy tính Quy tắc SimpsonMáy Tính Quy Tắc Hình ThangMáy tính Tổng RiemannCông Cụ Vẽ Đường Cong Tham SốMáy Tính Diện Tích Mặt Tròn XoayMáy tính Thể tích Vật thể Tròn xoayMáy Tính Khoảng Cách Hình Học Tọa ĐộMáy tính Công thức HeronMáy Tính Đường Tiếp Tuyến Với Đường TrònMáy Tính Đường Phân GiácMáy Tính Đường Tròn Nội TiếpMáy Tính Đường Tròn Ngoại TiếpMáy Tính Khoảng Cách Đường Tròn LớnMáy Tính Khoảng Cách 3DMáy Tính Hình XuyếnMáy Tính Hình Nón CụtMáy Tính Diện Tích Đa Giác Bất Quy TắcMáy Tính Đa Giác ĐềuCông cụ Nhận dạng Thiết diện ConicMáy Tính HyperbolMáy tính ParabolMáy Tính Khai Triển Nhị Thức NewtonMáy Tạo Tam Giác PascalMáy Tính Ký Hiệu Tích (Ký Hiệu Pi)Máy Tính Ký Hiệu Sigma (Tổng)Máy Tính Định Lý Nghiệm Hữu TỉMáy tính Quy tắc dấu DescartesMáy Tính Đường Song Song và Vuông GócMáy Tính Phương Trình Đường ThẳngCông cụ Chuyển đổi Dạng Tổng quát sang Dạng Hệ số GócMáy tính Dạng Điểm - Độ dốcGiải Hệ Phương Trình Phi TuyếnGiải Phương Trình Phân ThứcGiải Phương Trình ChữGiải Phương Trình Lượng GiácGiải Phương Trình MũGiải Phương Trình LogaritMáy Giải Phương Trình Bậc BốnMáy Giải Phương Trình Bậc BaMáy Tính Ước LượngChuyển đổi Số thành Phân sốTrình Tạo Đếm NhảyMáy Tính Giá Đơn VịMáy Tính Hàm Trần và SànMáy Tính Giá Trị Tuyệt ĐốiCông cụ Tìm Quy luật Dãy sốTrình tạo Biểu đồ Giá trị HàngMáy tính Thứ tự Phép tính (PEMDAS)Máy tính Cộng và Trừ theo CộtMáy Tính Nhân DọcTạo Bảng Cửu Chương🎮 Bộ Chuyển Đổi Tiền Tệ Trong Game🎲 Máy Tính Xác Suất Drop Đồ🎰 Máy Tính Pity Gacha⚔️ Máy tính DPS🎮 Bộ Chuyển Đổi Độ Nhạy Game❄️ Máy Tính Ngày Tuyết🚚 Ước tính Chi phí Chuyển nhà📈 Công Cụ Tạo Biểu Đồ Đường🥧 Công Cụ Tạo Biểu Đồ Tròn📊 Công cụ Tạo Biểu đồ Cột🔊 Máy Tạo Âm ThanhSổ Tay Trực Tuyến⬛ Máy tính Tỉ lệ Khung hình🌍 Máy Tính Dấu Chân Carbon👙 Máy tính Kích cỡ Áo ngựcMáy Tính Kích Thước LốpMáy Tính Chi Phí Nhiên Liệu💧 Máy Tính Điểm Sương🌡️ Máy Tính Chỉ Số Nhiệt🌬️ Máy tính Chỉ số Gió lạnh⏰ Máy Tính Thẻ Chấm Công📅 Máy Tính Chênh Lệch Ngày🕐 Bộ Chuyển Đổi Giờ Quân Sự⏱️ Đồng Hồ Bấm Giờ Trực Tuyến⏱️ Bộ Đếm Ngược Thời Gian🌐 Chuyển đổi Múi giờMáy Tính ThảmMáy tính Tường chắnMáy Tính Công Suất HVACMáy Tính Cách NhiệtMáy Tính Gạch LátMáy Tính Cốt ThépMáy Tính GỗMáy Tính Diện TíchMáy Tính Nhân ChéoMáy Tính Tóm Tắt Năm SốMáy Tính Phân VịMáy Tính Phân Phối ChuẩnMáy tính Giá trị pMáy Tính Tỷ LệMáy tính Hoàn thành Bình phươngMáy Tính Làm TrònMáy Tính Chia DàiĐếm Ký Tự Twitter/XBộ chọn bình luận YouTubeTrích xuất thẻ YouTubeCông cụ ước tính thu nhập YouTubeTrình tạo nhân vật RPG ngẫu nhiên