Đơ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ụ chuyển đổi kg sang lbsCông cụ đổi Pound sang KilogramMáy tính giảm giá phần trămMáy tính thương và số dưCông cụ Mã hóa CaesarMáy tính phân số tối giảnTìm kiếm việc làmCông cụ chuyển đổi chữ số La MãTrình Tạo Mã MorseTrình tạo chuỗi ngẫu nhiênMáy tính nhị phânCông cụ đếm hàngĐổ xúc xắcBộ chuyển đổi thập phân sang nhị phânMáy tính thập phân sang phân sốTrình tạo mê cungMáy tính trung bình mẫuBộ chuyển đổi Nhị phân sang HexXóa dấu cách⏱️ Máy Tính GiờMáy Tính Độ Lệch Chuẩn Tương ĐốiĐảo ngược văn bảnMáy tính căn bậc haiMáy tính thời gianTrình tạo bài tây ngẫu nhiênSắp xếp sốMáy tính HEXGhép VideoMáy tính Tuổi thọ Trung bìnhCông cụ loại bỏ dấu câu trực tuyến📅 Máy tính ngàyTrình chuyển đổi SRT sang TXTCông cụ chuyển đổi cm sang feet và inchMáy tính Phân tích Thừa số Nguyên tốBộ chuyển đổi Feet và Inch sang CmMáy tính ngày trong năm - Hôm nay là ngày thứ mấy trong nămCông cụ chuyển đổi psi sang kPamáy-tính-số-mũ-độ-chính-xác-caoTra cứu ID người dùng InstagramCông cụ chuyển đổi kPa sang psiCông cụ chuyển đổi nhị phân sang thập phânMáy tính Kiểm tra Chia hếtBộ chuyển đổi hex sang thập phânBộ chuyển đổi Thập phân sang Thập lục phân🔍 Kiểm tra Đạo vănTrình nén VideoParaphraser AITrình trích xuất âm thanhTrình nhân hóa văn bản AIMáy tính giai thừaMáy tính ModuloMáy tính Phương sai Độ chính xác caoBộ chuyển đổi hệ cơ sốMáy Tính Chu Vi Hình ElipCon số may mắn của tôi là gì?Máy tính BitwiseMáy tính Cạnh huyềnSắp xếp theo thứ tự bảng chữ cáiCông cụ tạo nhóm ngẫu nhiênSo sánh hai chuỗiBộ chuyển đổi HEXTạo Trò Chơi Tìm Từ⏱️ Đồng Hồ Bấm Giờ Trực TuyếnCông cụ chuyển đổi centimet sang inchCông Cụ Vẽ Đồ Thị Hệ Bất Phương TrìnhTrình tạo ngày sinh ngẫu nhiên⏰ Đồng Hồ Báo Thức Trực Tuyến📷 OCR Chuyển Ảnh Thành Văn Bảncông cụ chuyển đổi ppm sang phần trămCông cụ cắt ảnhTrình chuyển đổi HTML sang văn bảnBộ lặp MP3Công cụ chia ảnhCông cụ xáo trộn chữ cáiDanh sách năm nhuậnĐây có phải là Số Nguyên Tố?Công cụ chuyển đổi hệ thập lục phân sang nhị phânCông cụ chuyển đổi thời gian phân sốTrình tạo nhánh giải đấu ngẫu nhiênDanh sách các số nguyên tố⏱️ Bộ Đếm Ngược Thời GianBộ chuyển đổi FPSMáy tính So sánh Phân sốTạo Ô ChữBộ Chuyển Đổi Số Sang ChữCông cụ chuyển đổi gam sang poundMáy Tính Định ThứcTung đồng xuBộ chuyển đổi Hex sang RGBMáy Tính Hồi Quy Tuyến TínhCông cụ chuyển đổi thập phân sang BCDCông cụ chuyển đổi inch sang centimetDanh sách Dãy số FibonacciMáy tính CAGRtrình-tạo-nonogram-picrossBộ Chia Âm ThanhBộ chuyển đổi RGB sang HexChuyển đổi Nhị phân sang Bát phânGiả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 Thanh🖱️ Bộ Đếm ClickSổ 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ự🌐 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àiMáy Tính Khoa HọcHẹn Giờ Học PomodoroMáy Tính Chữ Số Có NghĩaMáy Tính Điểm Bài Kiểm TraMáy Tính Điểm Trung Bình Có Trọng SốMáy Tính Điểm Cuối KỳMáy Tính Điểm SốMáy tính Tần số Cộng hưởngMáy tính Trở khángMáy tính Decibel (dB)Máy tính Hệ số Công suấtRC Time Constant CalculatorMáy tính Biến ápMáy Tính Tiết Diện Dây DẫnMáy tính Timer 555Máy Tính Tụ ĐiệnMáy tính Điện trở Song songMáy Tính Bộ Chia Điện ÁpMáy Tính Điện Trở LEDBộ Chuyển Đổi Mol/Gam/HạtMáy Tính Chuẩn ĐộMáy Tính Điểm SôiMáy tính Công thức Thực nghiệmMáy Tính Hiệu Suất Phần TrămMáy tính StoichiometryCân Bằng Phương Trình Hóa HọcMáy Tính Pha LoãngMáy Tính Mã LựcMáy Tính Mô-men XoắnMáy tính Rơi tự doMáy tính Định luật Khí lý tưởngMáy Tính Áp SuấtMáy Tính Mật ĐộMáy Tính Công và Công SuấtMáy Tính Năng Lượng Thế NăngMáy Tính Năng Lượng Động HọcMáy Tính Chuyển Động PhóngMáy tính Động lượngMáy Tính Vận TốcMáy tính Gia tốcMáy Tính LựcMáy Tính ROI InfluencerMáy tính ROASMáy Tính CTRKiểm tra Tên người dùng Mạng xã hộiCông cụ Tối ưu Thời gian Đăng bài Mạng xã hộiMáy Tính ROI Mạng Xã HộiMáy Tính Chi Phí Quảng Cáo FacebookMáy Tính Kiếm Tiền YouTube ShortsMáy Tính Thu Nhập TwitchMáy Tính Thời Gian Xem YouTubeChuyển Đổi Dấu Thời Gian Twitter/XThống kê Kênh YouTubeMáy Tính Tiền TikTokHướng dẫn Kích thước Hình ảnh Mạng xã hộiTạo Font Chữ InstagramĐếm Ký Tự Twitter/XBộ chọn bình luận YouTubeTrích xuất thẻ YouTubeTrình tải hình thu nhỏ YouTubeCông cụ ước tính thu nhập YouTubeMáy tính Tỷ lệ Tương tác TikTokMáy tính Tỷ lệ Tương tác InstagramBộ Đếm Token AITrình tạo dàn ý bài viết AITrình tạo khẩu hiệu AITrình tạo Hashtag AITrình Viết Email AITrình Tạo Tiêu Đề Blog AITrình phát hiện nội dung AIKiểm tra liên kết hỏngTrình tạo thẻ HreflangKiểm tra Chuyển hướngKiểm tra độ tin cậy tên miềnKiểm tra tốc độ trangCông cụ Phân tích Tiêu đềTra cứu DNSTra cứu WHOISCông cụ Kiểm tra Tuổi Tên miềnTrình kiểm tra Open GraphTrình tạo Sơ đồ trang XMLTrình tạo robots.txtTrình tạo Schema MarkupTrì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 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ục