Đơ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 lbsMáy tính phân số tối giảnMáy tính thương và số dưMáy tính giảm giá phần trămCông cụ Mã hóa CaesarCông cụ chuyển đổi chữ số La MãXóa dấu cáchMáy tính thập phân sang phân sốMáy tính nhị phânTrình tạo chuỗi ngẫu nhiênTrình Tạo Mã Morse⏱️ Máy Tính GiờCông cụ đếm hàngMáy tính Phân tích Thừa số Nguyên tốMáy tính căn bậc haiTrình tạo bài tây ngẫu nhiênĐổ xúc xắc🔍 Kiểm tra Đạo vănmáy-tính-số-mũ-độ-chính-xác-caoTrình chuyển đổi SRT sang TXTGhép VideoMáy tính ModuloTrình tạo mê cungBộ chuyển đổi thập phân sang nhị phânParaphraser AISắp xếp sốMáy Tính Giờ Làm ViệcMáy tính Kiểm tra Chia hếtMáy tính giai thừaTạo Trò Chơi Tìm TừMáy tính HEXBộ chuyển đổi Nhị phân sang HexĐảo ngược văn bảnTrình nhân hóa văn bản AI📅 Máy tính ngàyCông cụ tạo nhóm ngẫu nhiênCông cụ chuyển đổi kPa sang psiCông cụ chuyển đổi nhị phân sang thập phânMáy tính So sánh Phân sốTung đồng xuMáy tính ngày trong năm - Hôm nay là ngày thứ mấy trong nămTrình nén Video📷 OCR Chuyển Ảnh Thành Văn BảnMáy tính Cạnh huyềnSo sánh hai chuỗiTrình trích xuất âm thanhTrình tạo ngày sinh ngẫu nhiênCông cụ loại bỏ dấu câu trực tuyếnBộ chuyển đổi HEXMáy tính Cung Mặt trời, Mặt trăng & Cung mọc 🌞🌙✨Công cụ xáo trộn chữ cáiCông cụ tạo mật mã chữBộ Chuyển Đổi Nhị PhânĐây có phải là Số Nguyên Tố?Sắp xếp theo thứ tự bảng chữ cáiTạo Ô ChữMáy tính thời gianTrình tạo số xổ sốMáy tính tương hợp tình yêuCông cụ chia ảnhMáy Tính Độ Lệch Chuẩn Tương ĐốiBộ chuyển đổi Feet và Inch sang CmCông cụ chuyển đổi psi sang kPa⏱️ Đồng Hồ Bấm Giờ Trực TuyếnCông cụ chuyển đổi cm sang feet và inchBộ chuyển đổi Thập phân sang Thập lục phânCông cụ chuyển đổi hệ thập lục phân sang nhị phânMáy Tính Chu Vi Hình ElipBộ lặp MP3Trình tạo tên ngẫu nhiênBộ chuyển đổi RGB sang HexCon số may mắn của tôi là gì?Bộ chuyển đổi hex sang thập phânCông cụ chuyển đổi hỗn số thành phân sốTrình cắt videoBộ Chuyển Đổi Số Sang ChữLịch trăng non và trăng trònMáy tính định lý PythagoreTìm kiếm việc làmCông cụ chuyển đổi centimet sang inchMáy tính One Rep Max (1RM)Bộ chuyển đổi FPSTrình phát hiện nội dung AIĐiều chỉnh tốc độ videoCông cụ chuyển đổi thập phân sang BCDMáy tính BitwiseMáy tính trung bình mẫuChữ Thường - Chữ HoaMáy tính tuổi sinh họcThống kê Kênh YouTubeDanh sách năm nhuậnMáy tính BSATrình chuyển đổi HTML sang văn bảnTrình tạo thẻ BingoMáy tính bước chân sang khoảng cáchBộ Chuyển Đổi Thời Gian Sang Thập PhânCông cụ chuyển đổi gam sang poundMá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 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⏰ Đồng Hồ Báo Thức Trực Tuyến⏰ 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ự⏱️ 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à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/XMá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 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 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 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 chuỗi từ (Word Ladder Generator)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ên