Đơn giản hóa quy trình làm việc của bạn: Tìm kiếm miniwebtool.
Thêm
Công cụ liên quan
Làm Đẹp CSSTrình Tạo Lệnh GitLàm đẹp HTMLCông cụ nén/làm đẹp JavaScriptTrình Biên Dịch Less Sang CSSTrình soạn thảo MarkdownTrình Dịch Pig LatinTrình tạo Schema MarkupTrình Biên Dịch SCSS Sang CSSCông cụ lặp chuỗi
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ó API dành cho developer: Chạy công cụ này từ ứng dụng, tự động hóa hoặc agent của bạn bằng một yêu cầu HTTP JSON. Xem tài liệu API

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ừ Videomáy-tính-số-mũ-độ-chính-xác-cao⏱️ Máy Tính GiờTrình tạo bài tây ngẫu nhiênCông cụ Mã hóa CaesarMáy tính Phân tích Thừa số Nguyên tốTra cứu ID người dùng FacebookCông cụ đếm hàngCông cụ chuyển đổi kg sang lbsCông cụ đổi Pound sang Kilogram🖱️ Bộ Đếm ClickTrình tạo chuỗi ngẫu nhiênTra cứu ID người dùng InstagramMáy tính phân số tối giảnMáy tính thương và số dưTrình Tạo Mã MorseBộ Chuyển Đổi Số Sang ChữMáy tính giảm giá phần trămMáy tính thời gianTrình nhân hóa văn bản AIĐảo ngược văn bảnCông cụ chuyển đổi chữ số La MãCông cụ chuyển đổi nhị phân sang thập phânBộ chuyển đổi thập phân sang nhị phânMáy tính ngày trong năm - Hôm nay là ngày thứ mấy trong nămMáy tính Cạnh huyềnTrình tạo nhánh giải đấu ngẫu nhiên📅 Máy tính ngàyMáy tính Kiểm tra Chia hếtTrình tạo oẳn tù tìTrình Luyện Toán NhẩmĐây có phải là Số Nguyên Tố?Sắp xếp sốBộ lặp MP3Máy Giải Phương Trình Bậc BaMáy tính thập phân sang phân sốĐổ xúc xắcTrình tạo số nguyên ngẫu nhiênGhép VideoThống kê Kênh YouTubeBộ chuyển đổi Feet và Inch sang CmLịch Sao Thủy Nghịch HànhCông Cụ Vẽ Đồ Thị Hệ Bất Phương TrìnhMáy tính chuyển đổi phân số sang số thập phânMáy tính căn bậc haiTrình phát hiện nội dung AIBộ chuyển đổi Thập phân sang Thập lục phânTrình trích xuất âm thanh🔍 Kiểm tra Đạo vănTrình tạo tên ngẫu nhiênBộ chuyển đổi Nhị phân sang HexCông cụ chuyển đổi kPa sang psiMáy tính giai thừaMáy tính HEXSắp xếp theo thứ tự bảng chữ cáiTrình chuyển đổi SRT sang TXTCông cụ tạo nhóm ngẫu nhiênMáy tính nhị phânBộ chuyển đổi FPSBộ chuyển đổi HEXCông cụ xáo trộn chữ cáiSo sánh hai chuỗiMáy tính thâm hụt caloTrình tạo ngày sinh ngẫu nhiênTạo Trò Chơi Tìm TừXóa dấu cáchTung đồng xuCông cụ chuyển đổi cm sang feet và inchMáy tính trung bình mẫuCon số may mắn của tôi là gì?Công cụ chia ảnhtra-cứu-địa-chỉ-MACTạo Ô ChữDanh sách các số nguyên tốMáy Tính Bộ Chia Điện Áp📈 Công Cụ Tạo Biểu Đồ ĐườngMáy tính So sánh Phân sốCông cụ loại bỏ dấu câu trực tuyếnCông cụ chuyển đổi Phần trăm sang PPM📷 OCR Chuyển Ảnh Thành Văn BảnMáy tính Độ dốc và CấpCông cụ Giải Quy hoạch Tuyến tínhCông cụ chuyển đổi centimet sang inchMáy Tính Chu Vi Hình ElipCông cụ chuyển đổi psi sang kPaMáy tính Tích phânĐiều chỉnh tốc độ videoCân Bằng Phương Trình Hóa Học⏰ Đồng Hồ Báo Thức Trực TuyếnMáy tính Ước số chung lớn nhấtBộ chuyển đổi hex sang thập phânChuyển đổi Số thành Phân sốTrình tạo địa chỉ giả ngẫu nhiênCông cụ ước tính thu nhập YouTubeTrình nén VideoTạo và giải SudokuBộ chọn bình luận YouTubeLịch trăng non và trăng trònMáy Tính Số TuầnMáy tính BSABộ Chia Âm ThanhDanh sách năm nhuận💧 Máy Tính Điểm SươngCông Cụ Rút Gọn Đại Số BooleanTrình tạo thẻ tín dụng ngẫu nhiênTrình tạo đồ vật ngẫu nhiênMáy tính TổngBộ chuyển đổi RGB sang HexChọn tên ngẫu nhiênCông cụ chuyển đổi Radian sang ĐộDanh sách Dãy số FibonacciMáy tính Cung Mặt trời, Mặt trăng & Cung mọc 🌞🌙✨Máy Tính Giờ Làm ViệcTrình tạo mê cungBảng mã ASCIICông cụ chuyển đổi hệ thập lục phân sang nhị phânTrình Mô Phỏng Cổng LogicTrình tạo thời gian ngẫu nhiênChuyển đổi CSV sang JSONCông cụ Mã hóa VigenèreCông cụ chuyển đổi thời gian phân sốMáy tính Tuổi thaiBộ Chuyển Đổi Nhị PhânMáy Tính Điểm SốMáy tính định lý PythagoreTrình tạo ngày ngẫu nhiên⏱️ Bộ Đếm Ngược Thời GianCông cụ Trực quan hóa Dữ liệu AI (Dán CSV)Công cụ tính điểm trung bình GPACông cụ Xoay ẢnhMáy tính GFRMáy tính ModuloMáy tính số thiên thầnTrình tạo thẻ BingoBộ Chuyển Đổi Thời Gian Sang Thập Phân📊 Công cụ Tạo Biểu đồ CộtChuyển Đổi GócCông cụ chuyển đổi phân số thành hỗn sốCông cụ chuyển đổi từ Feet sang MétCông cụ chuyển đổi Độ sang RadianMáy tính Hình trònMáy tính nhânSố ngẫu nhiênTrình tải hình thu nhỏ YouTubeCông cụ Tìm Quy luật Dãy sốCông cụ chuyển đổi gam sang poundBộ chia videoMáy tính tuổi sinh họcMáy Tính Hoa HồngMáy tính WHtRTrình chuyển đổi HTML sang văn bảnBộ chuyển đổi địa chỉ IP sang HexCông cụ Mã hóa AtbashCông cụ lặp lại văn bảnHẹn Giờ Học PomodoroKiểm Tra Số Chẵn Hay Số LẻMáy Tính HyperbolMáy tính Phân vị Chiều caoMáy tính CosMáy tính hệ sốMáy tính Đạo hàmĐố Vui Bảng Cửu ChươngTrình tạo chữ cái ngẫu nhiênTrình tạo tần số âm thanh ngẫu nhiênAI Trình thêm dấu câuCông cụ chuyển đổi hỗn số thành phân sốCông cụ chuyển đổi thập phân sang bát phânCông cụ vẽ đồ thị hàm số⏱️ Đồng Hồ Bấm Giờ Trực TuyếnMáy tính Điện trở Song songMáy tính Vị trí Mặt trờiMáy tính hoàng hôn và bình minhMáy tính LogaritMáy tính lương hưuTrình tạo GIFTuổi của bạn tính bằng năm, tháng, ngày, giờ, phút, giâyMáy Tính Mua Lại Hợp Đồng ThuêMáy Tính Pha Trộn OctanMáy Tính Pha Nhớt Xăng 2 ThìMáy Tính Dung Tích Động CơMáy Tính Ghế Sofa Qua CửaMáy Tính Dây CủiMáy Tính CADR Máy Lọc Không KhíMáy Tính Kích Thước Máy Hút ẨmMáy Tính Kích Thước Quạt TrầnMáy Tính Kích Thước Rèm CửaMáy Tính Kích Thước ThảmMáy tính chiều cao treo tranhMáy Tính Chiều Cao Lắp Đặt TVMáy Tính Kích Thước TVMáy Tính Thể Tích và Bạt Lót HồMáy Tính Muối Hồ BộiMáy Tính Thể Tích Hồ BơiMáy Tính Kích Thước Máy Nước NóngMáy Tính Nhựa EpoxyMáy Tính Khoảng Cách Con Tiện Lan CanMáy Tính Len Chân Tường và Nẹp Trang TríMáy Tính Ốp TườngMáy Tính Sơn Phủ Sàn GỗMáy Tính Hạt Giống CỏMáy Tính Cỏ NềnMáy Tính Nhựa ĐườngMáy Tính Yard KhốiMáy Tính Chiều Dài AntenMáy Tính Độ Lấp Đầy Ống Lót DâyMáy Tính Tụ Điện Nối Tiếp và Song SongMáy Tính Cảm KhángMáy Tính Chiếu Sáng PhòngMáy Tính Lux Sang LumenMáy Chuyển Đổi Lumen Sang WattMáy Tính Công Suất Máy Phát ĐiệnCông Cụ Chuyển Đổi mAh Sang WhMáy Tính Công Suất 3 PhaMáy Tính kVAMáy Tính Ampe Sang WattMáy Tính Watt Sang AmpeMáy Tính Điện Trở Nối TiếpMáy Tính Lực Ma SátMáy Tính Mặt Phẳng NghiêngMáy tính Lợi thế Cơ họcMáy tính Tốc độ Âm thanhMáy Tính Tốc Độ SóngMáy tính Lực nổiMáy tính Vận tốc Tới hạnMáy tính Bước sóng de BroglieMáy tính năng lượng photonMáy Tính E=mc²Máy Tính Giãn Nở Thời GianMáy tính Định luật thứ ba của KeplerMáy tính Vận tốc ThoátMáy Tính Lực Hấp DẫnMáy tính Định luật Beer-LambertMáy Tính Phương Trình NernstMáy tính Áp suất Thẩm thấuMáy Tính Độ Tăng Điểm SôiMáy Tính Độ Giảm Điểm Đông BăngMáy Tính Thành Phần Phần TrămMáy Tính Nồng Độ Đương LượngMáy tính Nồng độ MolanBộ Chuyển Đổi pKa Sang KaMáy tính Henderson-HasselbalchMáy Tính Sản Lượng Lý ThuyếtMáy tính Chất phản ứng Giới hạnMáy tính Cấu hình ElectronBảng tuần hoàn tương tácTrình Tạo Giáo Án AITrình tạo Câu đố AITrình tạo trích dẫn (APA/MLA/Chicago)Máy Tính Phần Trăm Điểm DanhMáy Tính Điểm APMáy Tính Điểm ACTMáy Tính Điểm SATChuyển đổi Phần trăm sang CGPATrình chuyển đổi CGPA sang phần trămCông Cụ Chấm Điểm Dễ Dàng (EZ Grader)Máy tính Chi phí Nuôi conMáy Tính Lượng Sữa Cho BéMáy Tính Kích Cỡ TãTrình Tạo Tên Em BéCông Cụ Dự Đoán Màu Mắt Em BéMáy Tính Phân Vị BMI Cho Trẻ EmCông Cụ Dự Đoán Chiều Cao Của TrẻMáy Tính Thời Gian Tăng Gấp Đôi hCGMáy tính ngày dự sinh IVFMáy tính làm tổ của phôiCông cụ dự đoán giới tính kiểu Trung QuốcCông cụ định dạng ngày ISO 8601Trình Chuyển Đổi Ngày JulianNap CalculatorMáy tính Pha Mặt TrăngWorld ClockBộ chuyển đổi Ngày sang Chữ số La MãĐếm Ngược Đến Khi Nghỉ HưuMáy Tính Cai NghiệnMáy Tính Nửa Sinh NhậtMáy Tính Ngày Kỷ NiệmMáy Tính Chia Tiền BoaMáy Tính ROI Email MarketingMáy tính Chi phí trên Mỗi Khách hàng Tiềm năngMáy Tính Vốn Lưu ĐộngTrình tạo nhân vật RPG ngẫu nhiên