Đơn giản hóa quy trình làm việc của bạn: Tìm kiếm miniwebtool.
Thêm
> 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// từ MiniWebtool, https://MiniWebtool.com/

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

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

Máy tính tuổiCông cụ đổi Pound sang KilogramCông cụ chuyển đổi kg sang lbsTrình Trích Xuất Ảnh từ VideoMáy tính giảm giá phần trămMáy tính thương và số dưTrình tạo oẳn tù tìMáy tính phân số tối giảnCông cụ chuyển đổi chữ số La MãCông cụ Mã hóa CaesarTrình Tạo Mã MorseMáy tính nhị phânBộ chuyển đổi thập phân sang nhị phânMáy tính căn bậc haiCông cụ chuyển đổi nhị phân sang thập phânTrình tạo chuỗi ngẫu nhiênMáy tính Phân tích Thừa số Nguyên tốMáy tính thập phân sang phân sốĐảo ngược văn bảnParaphraser AIMáy tính HEXCông cụ đếm hàngCông cụ chuyển đổi kPa sang psiTrình tạo tên ngẫu nhiên📅 Máy tính ngàyCông cụ chuyển đổi cm sang feet và inchSắp xếp sốTrình chuyển đổi SRT sang TXTXóa dấu cáchmáy-tính-số-mũ-độ-chính-xác-caoBộ chuyển đổi Thập phân sang Thập lục phânCông cụ xáo trộn chữ cáiBộ chuyển đổi Nhị phân sang HexMáy tính Cạnh huyềnMáy tính thời gianMáy tính So sánh Phân sốĐây có phải là Số Nguyên Tố?Con số may mắn của tôi là gì?Công cụ chuyển đổi hệ thập lục phân sang nhị phânBộ chuyển đổi Hex sang RGBMáy Tính Độ Lệch Chuẩn Tương ĐốiBộ chuyển đổi Feet và Inch sang CmTung đồng xuMáy tính Kiểm tra Chia hếtTạo Trò Chơi Tìm TừGhép VideoCông cụ chia ảnhBộ Chuyển Đổi Số Sang ChữMáy tính Cung Mặt trời, Mặt trăng & Cung mọc 🌞🌙✨Sắp xếp theo thứ tự bảng chữ cáiBộ chuyển đổi HEXCông cụ chuyển đổi Phần trăm sang PPMTrình tạo bài tây ngẫu nhiênBộ chuyển đổi hex sang thập phânMáy tính ngày trong năm - Hôm nay là ngày thứ mấy trong nămTuổi của bạn tính bằng năm, tháng, ngày, giờ, phút, giâyCông cụ chuyển đổi psi sang kPaCông cụ tạo nhóm ngẫu nhiênMáy tính giá trị tương laiTrình nén VideoTrình tạo mê cungTra cứu ID người dùng InstagramMáy Tính Giờ Làm ViệcBộ chuyển đổi FPSTrình tạo ngày sinh ngẫu nhiênSo sánh hai chuỗiTrình trích xuất âm thanhMáy tính giai thừaTrình tạo nhánh giải đấu ngẫu nhiênTrình tạo số nguyên ngẫu nhiênMáy tính Cầu thangCông cụ chuyển đổi pound sang gamtra-cứu-địa-chỉ-MACCông cụ chuyển đổi gam sang poundCông cụ chuyển đổi inch sang centimetBộ chuyển đổi mã Gray sang nhị phânCông cụ chuyển đổi thập phân sang bát phânMáy tính ModuloMáy tính Ước số chung lớn nhấtCông cụ chuyển đổi centimet sang inchCông cụ chuyển đổi bát phân sang nhị phânBộ Chuyển Đổi Nhị PhânMáy tính One Rep Max (1RM)Chuyển đổi Nhị phân sang Bát phânCông cụ chuyển đổi thời gian phân sốMáy tính CAGRMáy Tính Chia Đa ThứcChọn tên ngẫu nhiênTrình chuyển đổi HTML sang văn bảnTạo Ô ChữMáy tính Bội số chung nhỏ nhất (BCNN)Máy tính nhânTrình tạo số xổ sốBộ Chia Âm ThanhBộ Chuyển Đổi Mã Nhị Phân Sang Mã XámCông cụ loại bỏ dấu câu trực tuyếnDanh sách Dãy số FibonacciMáy tính BitwiseTrình kiểm tra WebhookBảng mã ASCIICông cụ Kiểm tra APIMáy tính Mạng con IPTrình tạo Box Shadow CSSCông cụ chuyển đổi hình ảnh sang Base64Bộ chuyển đổi HTML sang MarkdownTrình soạn thảo MarkdownChuyển đổi CSV sang JSONTrình Định dạng & Xác thực YAMLLàm đẹp HTMLLàm Đẹp CSSCông cụ nén/làm đẹp JavaScriptKiểm tra sự khác biệtTrình kiểm tra RegexTrình Định dạng và Xác thực JSONMáy tính Tuổi thọ của ChóMáy tính Bảo hiểm Thú cưngMáy tính khẩu phần ăn sốngMáy tính Thai kỳ ChóMáy tính độc tính sô-cô-laCông cụ Dự đoán Cân nặng Chó conMáy tính nhiều phân sốMáy tính khẩu phần thức ăn cho chóBộ chuyển đổi rau thơm tươi sang khôTrình chuyển đổi bơ sang dầuBộ chuyển đổi lò nướng sang nồi chiên không dầuMáy tính Sous VideMáy tính SourdoughMáy tính bột pizzaMáy tính thời gian nấu gà tâyMáy tính thời gian xông khói thịtCông cụ chuyển đổi cốc sang gramMáy tính dinh dưỡng công thức nấu ănBộ chuyển đổi đơn vị nấu ănCông cụ Điều chỉnh Công thứcMáy tính Calo Thai kỳMáy tính Tuổi thaiMáy tính Calo cho bà mẹ cho con búMáy tính phần trăm tăng trưởng của béMáy Tính Tăng Cân Thai KỳMáy tính Vùng tốc độMáy tính Nhảy caoMáy Tính Handicap GolfMáy tính điểm BowlingMáy tính Tốc độ Ba môn Phối hợpMáy tính Pace MarathonMáy tính Tiêu chuẩn Sức mạnhMáy tính mỡ cơ thể Quân độiMáy tính bước chân sang khoảng cáchMáy tính Nhịp độ BơiMáy tính Tốc độ Đạp xeMáy tính nguy cơ bệnh timMáy tính Carb ròngMáy tính CarbohydrateMáy tính Khối lượng Cơ thể Không mỡMáy tính Loại Cơ thểMáy tính nhóm máuMáy tính tuổi sinh họcMáy tính Tuổi thọ Trung bìnhMáy tính Phân vị Chiều caoTrình phiên dịch Huyết ápMáy tính Độ thanh thải CreatinineMáy tính GFRMáy Tính Giảm CânMáy tính nhịn ăn gián đoạnMáy tính KetoMáy tính Lượng ProteinMáy tính Nồng độ Cồn trong MáuMáy tính Cân nặng Lý tưởngMáy tính Vốn chủ sở hữu NhàMáy tính Lợi nhuận Lật nhàMáy tính hoa hồng bất động sảnMáy tính Chi phí Đóng Giao dịchMáy Tính Bất Động Sản Cho ThuêMáy tính Thuê vs MuaMáy tính Lợi suất Tương đương ThuếMáy tính Trợ cấp Ly hônMáy tính tiền cấp dưỡng conMáy tính Thuế Thừa kếMáy tính Thuế Tài sảnMáy tính Khấu trừ Thuế W-4Máy tính thuế 1099Máy tính Thuế Tự kinh doanhMáy tính Thuế Lợi tức VốnƯớc tính hoàn thuếMáy tính Bậc thuếMáy tính thuế thu nhậpMáy tính Đầu tư BitcoinMáy tính Lãi Lỗ Tiền Điện TửMáy tính Chi phí Nhân viênMáy tính Định giá Doanh nghiệpMáy tính Điểm Hòa vốnMáy tính HELOCMáy tính khoản vay FHAMáy tính tiền đặt cọcMáy tính Trả hết Thế chấpMáy tính Quỹ khẩn cấpMáy tính Mục tiêu Tiết kiệmMáy tính ngân sáchMáy tính Giá trị ròngMáy tính Hợp nhất NợMáy tính trả nợMáy tính khoản vay cá nhânMáy tính vay kinh doanhMáy tính Bình quân giáMáy tính Tái đầu tư Cổ tứcMáy tính lãi lỗ cổ phiếuMáy tính Quỹ tương hỗMáy tính SIPMáy tính RMDMáy tính lương hưuMáy tính Quyền lợi Bảo hiểm Xã hộiMáy tính Hưu tríMáy tính Roth IRAMáy tính 401kCông cụ chuyển đổi tiền tệMáy tính tiền tipTrình tạo Nối các ChấmTrình tạo thẻ BingoTrình tạo chuỗi từ (Word Ladder Generator)Công cụ tạo mật mã chữTạo SlitherlinkTạo Hashi Cầu NốiTạo FutoshikiTạo Killer SudokuMáy tính Căn nguyên thủyMô phỏng mã hóa RSA từng bướcMáy tính đặc trưng EulerMáy tính đường chéo đa giácTrình tạo mẫu hình nón trải phẳngKiểm tra hàm chẵn lẻMáy tính Hệ số Chuỗi FourierMáy tính Phương pháp Runge-Kutta (RK4)Máy tính WronskianMáy tính Vết Ma trậnMáy tính Hạng Ma trậnTrình tạo tần số âm thanh ngẫu nhiênTrình tạo hợp âm ngẫu nhiênTrình tạo loadout ngẫu nhiênTrình tạo bài Poker ngẫu nhiênTrình tạo khai cuộc cờ vua ngẫu nhiênTrình tạo nhân vật RPG ngẫu nhiênMáy tính Phân tích Giá trị Kỳ dị (SVD)Máy tính Hệ số GiniMáy tính Phân phối Dừng Chuỗi MarkovMáy tính Nguyên lý Chuồng bồ câuMáy tính số StirlingMáy tính Hoán vị lệch (Giai thừa phụ)Trình tạo Số CatalanTrình xác thực dãy bậc đồ thịMáy tính Cây khung nhỏ nhấtMáy tính Đường đi Ngắn nhất DijkstraTrình tạo Ma phươngMáy tính Số Hạnh phúcMáy tính Phỏng đoán CollatzMáy tính Độ congMáy tính Bán kính Hội tụMáy tính Phân tích LU Ma trậnMáy tính Phép chiếu VectorMáy tính Gram-SchmidtMáy tính Phương trình Hình cầuMáy tính khoảng cách từ điểm đến mặt phẳngMáy tính Trực tâm Tam giácMáy tính Trọng tâm Tam giácMáy tính Công thức Dây giàyMáy tính Phân số liên tụcMáy tính Nghịch đảo Nhân theo Mô-đunMáy tính Thuật toán Euclid Mở rộngMáy tính Hàm Phi EulerMáy tính Định lý Số dư Trung QuốcCông cụ tạo Biểu đồ Venn (3 Tập hợp)Máy tính lý thuyết tập hợpCông cụ tạo bảng chân trịCông cụ chuyển đổi cân nặng người sang kiếnMáy tính Calo cho MèoMáy tính tiết kiệm bóng đènMáy tính Chi phí TắmMáy tính chi phí điện đào BitcoinMáy tính Giá trị Giấy vệ sinhMáy tính Quãng đường Bàn phímTrình tạo Bingo từ thông dụngMáy tính Xác suất Ngày nghỉ ốmMáy tính lương thực tế theo giờMáy tính Cà phê vs. Giấc ngủMáy tính thời gian trả lời emailMáy tính FIRE - Tự do Tài chính, Nghỉ hưu sớmMáy tính thời gian lãng phí đi làmBộ đếm Chi phí Cuộc họpMáy tính lương trong nhà vệ sinhTrình tạo KakuroTrình tạo KenKen (Calcudoku)trình-tạo-nonogram-picrossGiải và luyện trò chơi 24Tạo và giải SudokuMáy tính khay phô maiMáy tính đài phun sô cô laMáy tính ABV CocktailMáy tính khẩu phần mì SpaghettiMáy tính thời gian làm lạnh biaMáy tính Taco BarMáy tính BBQMáy tính quá liều CaffeineCông cụ lập kế hoạch tiệc pizzaMáy tính rượu tiệc cướiMáy tính Nhà gạch LegoMáy tính Lấp đầy Phòng Bỏng ngôMáy tính va chạm đồng xu rơiMáy tính rơi xuyên Trái đấtMáy tính bức xạ chuốiMáy tính năng lượng Chuột HamsterMáy tính Tỷ lệ Lỗi Dịch chuyển Tức thờiMáy tính nấu gà bằng năng lượng động năngMáy tính lực nâng bóng bay HeliMáy tính Thời gian Sống sót ZombieTrình Kiểm Tra Kích Thước Thu Thập GooglebotMáy tính tỷ lệ bãi đỗ xeMáy tính Cây thông NoelMáy Tính Ngày Tận Thế Ma Cà RồngMáy tính giá trị PizzaMáy tính Quầy nước chanhTrình tạo tiểu bang Mỹ ngẫu nhiênTrình tạo lý do ngẫu nhiênTrình tạo hoạt động ngẫu nhiênTrình tạo công thức cocktail ngẫu nhiênCông cụ chọn phim ngẫu nhiênTrình tạo tên miền ngẫu nhiênTrình tạo siêu năng lực ngẫu nhiênTrình tạo Haiku ngẫu nhiênTrình tạo lời nhắc viết ngẫu nhiênTrình tạo IMEI Ngẫu nhiên